프로젝트를 진행하면서 float를 이용하여 레이아웃 배치를 해보았다.
어느정도 이해가 될 법하니 이제는 CSS 레이아웃의 왕중의 왕 grid를 사용해보고 싶었다.

Grid는 2차원 레이아웃 시스템으로 두 방향(가로-세로)를 조작할 수 있기 때문에 더 복잡한 레이아웃 표현이 가능한 시스템이다.

Grid 레이아웃을 만들기 위해 필요한 기본적인 요소는 두 가지가 있다.

1. container
2. item

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

용어

• Grid container : item을 감싸는 부모 container를 의미한다.
• Grid item : 부모 container 안에 있는 자식 요소를 의미한다.
• Grid track : 그리드의 행 또는 열
• Grid cell : Grid의 한 칸. 즉, Grid 안에 있는 한 개의 html 요소이다.
• Grid Line : Grid-cell을 구분짓는 선이다.
• Grid Number : Grid-Line의 각 번호
• Grid Gap : Grid 셀 사이의 간격
• Grid Area : Grid 셀들의 집합.

속성들

Grid의 속성들은 크게 두 가지로 구분할 수 있다.

• container에 적용하는 속성
• item에 적용하는 속성

container에 적용하는 속성

• display: grid
• grid-template-rows / grid-template-columns
• row-gap / column-gap
• grid-auto-columns / grid-auto-rows
• grid-template-areas
• grid-auto-flow
• align-items
• justify-items
• align-content
• justify-content

display: grid

Grid container에 적용하는 속성으로, 그리드 시스템을 사용하려면 꼭 적용해줘야 한다.

.container {
	display: grid;
}

grid-template-rows / grid-template-columns - 그리드 형태 정의

container에 Grid track의 크기를 지정해주는 속성이다.

• grid-template-rows : 행의 배치(높이 지정)
• grid-template-columns : 열의 배치 (너비 지정)

grid-template-rows: 100px 100px 300px;
grid-template-columns: 1fr 2fr 1fr;

위의 속성을 선언하면 3줄의 row를 각각 100px, 100px, 300px로 만들고 column의 크기를 1:2:1의 비율로 설정하겠다는 의미이다.

repeat 함수와 minmax 함수

row와 column의 크기를 설정할때 사용하는 함수들이다.

• repeat(반복횟수, 반복값) : 반복되는 값을 자동으로 처리

grid-template-columns : repeat(5, 200px);

repeat 함수로 200px인 크기의 열이 5개 만들어진다.

• minmax(최솟값, 최댓값) : 최솟값과 최댓값을 지정

grid-template-columns: repeat(5, 200px);
grid-template-rows: repeat(3, minmax(200px, auto));

내용의 양이 그리드 행의 크기보다 작더라도 최소한 200px는 유지하도록 하고, 내용이 많아서 200px가 넘어가면 크기가 자동으로 늘어난다.

item에 적용하는 속성

• grid-column-start / grid-column-end / grid-column / grid-row-start/ grid-row-end / grid-row
• align-self
• justify-self
• place-self
• order
• z-index