CSS 그리드에 대한 간단한 가이드

CSS 그리드란?

그리드는 열과 행을 활용하여 반응형 웹 디자인 레이아웃을 만드는 CSS의 레이아웃 모듈입니다.

를 사용하는 경우 HTML에서 상위 컨테이너를 만들고 CSS에서 요소의 display 속성을 flex 또는 inline-flex 로 설정합니다.

<div id="flex-container">
  <div>Flex Item 1</div>
  <div>Flex Item 2</div>
  <div>Flex Item 3</div>
  <div>Flex Item 4</div>
</div>

display 속성이 grid 또는 inline-grid 인 Grid를 사용하는 것과 동일합니다.

grid는 컨테이너를 블록 수준 요소

로 표시합니다.

inline-grid는 컨테이너를 인라인 수준 요소

로 표시합니다.

CodePen을 따라해보세요:

그리드 선은 그리드를 열과 행으로 나눕니다.

왼쪽에서 볼 수 있듯이 세로 및 가로 그리드 선은 1부터 시작합니다. 이것은 그리드 항목의 위치를 결정하는 데 사용할 수 있는 숫자 인덱스입니다.

음수 인덱스를 사용하여 그리드의 반대쪽 끝을 가져올 수도 있습니다.

그리드 셀은 그리드 행과 열이 교차하는 위치에서 정의되는 단일 단위입니다.

AGrid Track는 두 개의 인접한 그리드 선 사이의 공간이므로 기본적으로 열과 행입니다.

이것이 MDN에서 설명하는 방법입니다.

거터는 셀을 서로 분리하는 그리드 트랙을 분리하는 데 사용할 수 있습니다. gap 속성을 사용하여 설정되며 아래에서 Explicit Grids로 설명하겠습니다.

명시적 그리드, fr 및 반복

명시적 그리드는 정확한 행과 열 수로 명시적으로 정의된 그리드 레이아웃입니다.

그리드 컨테이너에서 이러한 속성을 선언합니다.

grid-template-columns

원하는 열 수를 지정하려면 grid-template-columns 를 사용하십시오.
grid-template-columns: auto auto auto는 컨테이너 너비에 걸쳐 있는 동일한 크기의 열 3개를 나타냅니다.

grid-template-rows

원하는 행 수를 지정하려면 grid-template-columns 를 사용하십시오.
grid-template-rows: 50px 50px 50px는 각각 높이가 있는 세 개의 행을 나타냅니다.

gap

gap 속성은 그리드 셀 사이에 여백을 설정하는 데 사용됩니다.

이제 이러한 각 속성이 무엇을 하는지 알았으므로 속성 내에서 다양한 값을 사용할 수 있지만 px 또는 fr 중 하나를 사용하겠습니다.

fr

플렉시블 장치fr는 그리드에서 도입되었습니다. 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타냅니다.

각각 크기가 1fr 인 세 개의 열이 있는 경우 그리드 컨테이너 내에서 크기가 동일합니다.

repeat

repeat 함수는 열이나 행을 정의할 때 반복할 필요가 없도록 사용됩니다. 명시적으로 정의하려는 열 수와 해당 열의 크기에 대한 인수를 사용합니다.
grid-template-columns: repeat(3, 1fr)

암시적 그리드

암시적 그리드는 명시적으로 정의된 트랙보다 더 많은 그리드 항목이 있을 때 사용되는 레이아웃입니다.

예를 들어 4개의 열과 2개의 행을 명시적으로 정의했지만 컨테이너에 들어갈 수 있는 것보다 더 많은 항목이 있는 경우 다른 열과 행으로 정의한 규칙을 사용하여 암시적 Grid가 생성됩니다.

그리드에 포함할 항목 수를 모르는 경우 전체 레이아웃이 암시적 그리드일 수 있습니다.

암시적으로 생성된 열과 행의 크기를 정의하려면 이전과 동일한 값으로 grid-auto-rows 및 grid-auto-columns를 사용할 수 있습니다.

암시적 네 번째 열이 없으면 grid-auto-columns의 크기 조정이 작동하지 않습니다.
grid-column 를 사용하여 암시적 네 번째 열을 만들 수 있습니다. grid-column는 grid-column-start & grid-column-end의 줄임말입니다.

그리드 선의 값을 사용하여 열을 시작하려는 위치와 끝을 원하는 위치를 지정해야 합니다. 이를 위해 속기를 사용합니다.

grid-column: 4 / 6

grid-column: starting-grid-line / ending-grid-line

속기에는 슬래시가 필요합니다.