[css] Grid 한 눈에 정리하기

🏃🏻‍♂️ intro

grind는 행과 열 두 방향(2차원) 레이아웃 시스템이다.

📦 컨테이너 속성

display

• display : 그리드 컨테이너를 정의
  • grid : Block 특성의 그리드 컨테이너 정의
  • inline-grid : Inline 특성의 그리드 컨테이너 정의

grid-template(명시적 트랙)

• grid-template-rows : 명시적 행(track)의 크기를 정의

  • 1행 크기, 2행 크기, ... 단위 : px, %, fr

• grid-template-columns : 명시적 열(track)의 크기를 정의

  • 1열 크기, 2열 크기, ... 단위 : px, %, fr

• grid-template-area : 영역의 이름을 참조해 템플릿 생성

  • .container {
      display: grid;
      grid-template-rows: repeat(3, 100px);
      grid-template-columns: repeat(3, 1fr);
      grid-template-areas: /* 그리드 컨테이너에서 area 정의*/
        "header header header"
        "main main aside"
        "footer footer footer";
    }
    /* 그리드 아이템에서 어떤 area에 속하는지 정의*/
    header { grid-area: header; }
    main   { grid-area: main;   }
    aside  { grid-area: aside;  }
    footer { grid-area: footer; }

• grid-template : grid-template-rows, grid-template-columns , grid-template-areas의 단축 속성

  • grid-template: <grid-template-rows> / <grid-template-columns>;
    grid-template: <grid-template-areas>;
    grid-template:
        [1행시작선이름] "AREAS" 행너비 [1행끝선이름]
        [2행시작선이름] "AREAS" 행너비 [2행끝선이름]
        / <grid-template-columns>;

• grid : grid-template-xxx 와 grid-auto-xxx 의 단축 속성

  • grid: <grid-template>;
    grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
    grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;

grid-auto(암시적 트랙)

• grid-auto-rows : 암시적 행(track)의 크기를 정의

  • 명시적트랙 정의(grid-template-rows)와 동일하게 사용한다.

• grid-auto-columns : 암시적 열(track)의 크기를 정의

  • 명시적트랙 정의(grid-template-columns)와 동일하게 사용한다.

• grid-auto-flow : 자동 배치 알고리즘 방식을 정의

  • row : 각 행 축을 따라 차례로 배치 (기본값)
  • column : 각 열 축을 따라 차례로 배치
  • row-dense : 각 행 축을 따라 차례로 배치, 빈 영역을 메움
  • column-dense : 각 열 축을 따라 차례로 배치, 빈 영역을 메움

• grid : grid-template-xxx 와 grid-auto-xxx 의 단축 속성

  • grid: <grid-template>;
    grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
    grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;

gap

• row-gap(grid-row-gap) : 행과 행 사이의 간격을 정의
• column-gap(grid-column-gap) : 열과 열 사이의 간격을 정의
• gap(grid-gap) : xxxx-gap 의 단축 속성

정렬

content

• justify-content : 그리드 컨텐츠를 수평(행 축) 정렬

  • normal : stretch 와 같다. (기본값)
  • start : 시작점(왼쪽) 정렬
  • end : 끝점(오른쪽쪽) 정렬
  • center : 수평 가운데 정렬
  • space-around : 각 행 좌우에 여백을 고르게 정렬
  • space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지는 여백이 고르게 정렬
  • space-evenly : 모든 여백을 고르게 정렬
  • stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림

• align-content : 그리드 컨텐츠를 수직(열 축) 정렬

  • normal : stretch 와 같다. (기본값)
  • start : 시작점(위쪽) 정렬
  • end : 끝점(아래쪽) 정렬
  • center : 수직 가운데 정렬
  • space-around : 각 행 위아래 여백을 고르게 정렬
  • space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지는 여백이 고르게 정렬
  • space-evenly : 모든 여백을 고르게 정렬
  • stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림

• place-contetn : align-content 와 justify-content 의 단축 속성

  • .container {
      place-content: <align-content> <justify-content>;
    }

items

아이템의 가로, 세로의 크기가 셀(트랙)보다 작을 때, 셀 안에서 아이템의 정렬을 정의

셀 안에서는 아이템은 1개이므로 space-xxx 계열 값은 존재하지 않는다.

• align-items : 그리드 아이템들을 수직(열 축) 정렬
  • normal : stretch 와 같다. (기본값)
  • start : 시작점(위쪽) 정렬
  • end : 끝점(아래쪽) 정렬
  • center : 수직 가운데 정렬
  • stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림
• justify-items : 그리드 아이템들을 수평(행 축) 정렬
  • normal : stretch 와 같다. (기본값)
  • start : 시작점(왼쪽) 정렬
  • end : 끝점(오른쪽쪽) 정렬
  • center : 수평 가운데 정렬
  • stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림
• place-items : align-items 와 justify-items 의 단축 속성

🧸 아이템 속성

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
}

.item:nth-child(1) {
  /* Row 1번에서 3번까지 */
  grid-row-start: 1;
  grid-row-end: span 2;
}

grid-row

• grid-row-start : 그리드 아이템의 행 시작 위치 지정
• grid-row-end : 그리드 아이템의 행 끝 위치 지정
• grid-row : grid-row-start 와 grid-row-end 의 단축 속성

grid-column

• grid-column-start : 그리드 아이템의 열 시작 위치 지정
• grid-column-end : 그리드 아이템의 열 끝 위치 지정
• grid-column : grid-column-start 와 grid-column-end 의 단축 속성

area

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: /* 그리드 컨테이너에서 area 정의*/
    "header header header"
    "main main aside"
    "footer footer footer";
}
/* 그리드 아이템에서 어떤 area에 속하는지 정의*/
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

• grid-area : 영역 이름을 설정하거나, grid-row 와 grid-column 의 단축 속성

단일 그리드 아이템 정렬

• justify-self : 단일 그리드 아이템을 수평(행 축) 정렬

  • normal : stretch 와 같다. (기본값)
  • start : 시작점(왼쪽) 정렬
  • end : 끝점(오른쪽쪽) 정렬
  • center : 수평 가운데 정렬
  • stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림

• align-self : 단일 그리드 아이템을 수직(열 축) 정렬

  • normal : stretch 와 같다. (기본값)
  • start : 시작점(위쪽) 정렬
  • end : 끝점(아래쪽) 정렬
  • center : 수직 가운데 정렬
  • stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림

• place-self : align-self 와 justify-self 의 단축 속성

배치 순서와 위치

• order : 그리드 아이템의 배치 순서를 지정
• z-index : 그리드 아이템의 쌓이는 순서를 지정

명시적 트랙(셀)과 암시적 트랙(셀)

grid-template-row 와 grid-template-column 속성으로 정의한 명시적 트랙(셀)의 외부에 배치되는 트랙을 암시적 트랙(셀)이라한다.

📚 참고사이트

• heropyTech블로그 - CSS Grid 완벽 가이드

• 1분코딩 - 이번에야말로 CSS Grid를 익혀보자

• Grid cheatSheet