[CSS] Grid

Grid란?

Flex(플렉스)가 1차원을 위한 레이아웃 시스템이라면 Grid(그리드)는 2차원(행과 열)을 위한 레이아웃 시스템입니다.

Container

• Flex와 마찬가지로 Item들을 포함하는 부모요소를 Container라 부르며 Container에 display: grid;를 설정해줌으로써 컨테이너 내부를 그리드 영역으로 설정해줄 수 있습니다.

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

.container {
	display: grid;
}

grid-template-rows

• grid-template-rows는 행(row)의 크기와 배치를 지정해 줄 수 있는 속성입니다.

.container {
	grid-template-rows: 200px 200px 500px;
	/* grid-template-rows: 1fr 1fr 1fr */
	/* grid-template-rows: repeat(3, 1fr) */
	/* grid-template-rows: 200px 1fr */
	/* grid-template-rows: 100px 200px auto */
}

grid-template-columns

• grid-template-columns는 열(column)의 크기와 배치를 지정해 줄 수 있는 속성입니다.

.container {
	grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr */
	/* grid-template-columns: repeat(3, 1fr) */
	/* grid-template-columns: 200px 1fr */
	/* grid-template-columns: 100px 200px auto */
}

grid-template-areas

• grid-template-areas는 각 영역을 설정해줄 수 있는 속성입니다. 네모 형태의 영역만 지정해줄 수 있습니다.
  

grid-auto-rows, grid-auto-columns

• grid-template-columns(grid-template-rows)의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성입니다.
• Internet Explorer에서는 동작하지 않는 단점이 있습니다.

<div class="container">
  <div class="item">Item<br>Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
}

grid-auto-flow

• 아이템이 자동 배치되는 주축을 결정하는 속성입니다. (기본값 row)
• dense는 기본적으로 빈 셀을 채우는 알고리즘이며, row와 column에 따라 기준이 달라집니다.
  

grid (shorthand)

• 명시적 속성 (grid-template-), 암시적 속성 (grid-auto-)을 설정할 수 있는 단축속성입니다.
• row / column속성의 형태로 표시합니다.

justify-content, align-content

• 컨테이너내부의 아이템이 차지하지 않는 공간이 생겼을 때, 아이템들을 정렬하기 위해 사용합니다.

justify-items, align-items

content는 아이템의 구역을 정렬하기 위해 사용하는 속성이라면, items는 아이템 내부의 공간을 정렬하기 위해 사용하는 속성입니다.

Item

• Grid Container의 자식요소에 해당하며 Grid 규칙에 의해 요소들이 배치됩니다.

grid-row, grid-column

• grid-row(column)-start와 grid-row(column)-end을 함께 설정해줄 수 있는 shorthand입니다.
• 숫자가 아니더라도 span 3으로 몇칸을 점유할지 설정해줄 수 있습니다.

grid-area

• grid-row, grid-column을 한번에 설정할 수 있는 shorthand입니다.

order

• flex에서처럼 items의 순서를 지정해줄 수 있는 속성입니다. (기본값 0)
• 음수를 지정해 맨 앞으로, 큰 양수를 지정해 맨 뒤에 표시할 수 있습니다.
• 화면에 표시되는 내용만 달라질 뿐 focus할 때는 보이는 내용과 다르게 동작할 수 있습니다.

Grid

fr(fractional unit)

fr은 사용 가능한 공간에 대한 비율을 의미합니다.
그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타냅니다.

.grid {
    display: grid;
    /* 1ft은 남는 공간의 1/3을 의미합니다. */
    grid-template-columns: auto 100px 1fr 2fr;
}

min-content, max-content

그리드 아이템이 포함하는 컨텐츠의 최소(최대) 크기를 의미합니다.

auto-fill, auto-fit

auto-fill, auto-fit은 row와 column의 개수를 Container 및 크기에 맞게 자동으로 조절해주는 속성입니다.
auto-fill, auto-fit의 차이점은 row, column에 모든 아이템을 수용하고 남는 공간이 생길 때 발생합니다. auto-fill은 남는 공간을 그대로 유지하고 auto-fit은 남는 공간을 축소해줍니다.