Grid

바깥쪽에 container박스가 있고 내부에 item들을 나열한다는 점에서는 flexbox와 비슷한 개념입니다. 단, flex레이아웃의 기본 개념이 1차원이었다면, grid 레이아웃의 개념은 2차원으로 행과 열이 존재하기 때문에 gird레이아웃의 경우 주축과 교차축 모두에 아이템을 나열할 수 있습니다.

( 하나의 grid는 columns, rows로 구분이 되며 각 행과 열 사이의 공백인 gutters가 존재합니다. )

display: inline-grid

inline-grid 속성값을 이용하면 외부적으로(컨테이너끼리)는 인라인요소로 정렬이 되고, 내부적으로는 박스 요소로 정렬이 되도록 할 수 있씁니다.

container에 사용할 수 있는 속성

1.grid-template-rows & grid-template-columns

몇 개의 행과 열을 가지게 할 것인지를 설정하는 속성입니다. 속성의 값으로는 단위도 함께 작성을 해주어야 합니다.

px, em과 단위 외에도 fr(비율)과 함수표기법인 repeat()과 같은 값을 사용할 수 있습니다. 아래 표기는 동일합니다.

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-colums: repeat(4, 1fr); //1fr을 4번 반복한다.
----------
grid-template-columns: 80px 80px 80px;
grid-template-columns: repeat(3, 80px);

예제1 (px)

값을 명시해주지 않은 3번째 행의 경우 내부 컨텐츠 크기만큼 높이를 차지하고 있는 것을 확인할 수 있습니다.

.container {
  border: 5px dashed orange;
  display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 100px 100px;
}

예제2 (fr)

px나 em외에 fr을 통해 너비나 높이에 맞춰 비율을 설정할 수 있습니다.

.container {
...
  grid-template-rows: 1fr 2fr 1fr;
}

2. grid-template-areas

아이템들이 여러개의 셀을 차지하도록 설정할 수 있습니다. 마치 땅따먹기 하는 것과 같습니다. 만약 요소가 자리를 차지하지 않게 하고 싶은 경우 점(.)을 이용해 빈칸을 명시할 수 있습니다.

예제

//index.html
  <div class="container">
    <div class="item header">header</div>
    <div class="item main">main</div>
    <div class="item sidebar">sidebar</div>
    <div class="item footer">footer</div>
  </div>

grid-template-areas를 사용하기 위해 각각의 요소에 이름표를 붙여줍니다.

.header {
  grid-area: hd;
}
.main {
  grid-area: ma;
}
.sidebar {
  grid-area: sb;
}
.footer {
  grid-area: ft;
}

container요소에 grid-template-areas를 작성해줍니다.

.container {
...
  grid-template-areas: 
   "hd hd hd hd hd"
   "ma ma ma sb sb"
   "ft ft ft ft ft"
}

3. row-gap(grid-row-gap) & column-grap

각각의 행(열)간의 간격을 설정합니다.

container {
...
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  row-gap: 20px;
  column-gap: 50px;
}

4. gap

gap 속성을 이용해 row-gap과 column-gap을 단축해 작성할 수 있습니다. 순서대로 작성을 해주어야합니다.

5. grid-auto-rows & grid-auto-columns

개발자도구를 이용해 확인을 해보면 gird-template-rows와 grid-template-columns를 설정하면 html상 items들을 모두 지우더라도 행과 열을 명시적으로 만들어놓은 것을 확인할 수 있습니다. grid-auto-rows을 이용하는 경우 추가로 아이템의 요소가 생기는 경우 암시적으로 높이를 명시해줄 수 있습니다.

6. grid-auto-flow

7. grid단축속성

grid속성을 이용하면 명시적인 속성인 grid-template-rows, grid-template-columns, grid-template-areas 값과 암시적인 속성인 grid-auto-rows, grid-auto-columns, grid-atuo-flow 값을 한 번에 작성을 할 수 있습니다.

grid: row관련속성 값 / column관련 속성 값

//아래코드는 같습니다.
grid-template-rows: 1fr 2fr;
grid-template-columns: 100px 200px;
---------------------------------
grid: 1fr 2fr / 100px 200px