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

4825 단어 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-columngrid-column-start & grid-column-end의 줄임말입니다.

    그리드 선의 값을 사용하여 열을 시작하려는 위치와 끝을 원하는 위치를 지정해야 합니다. 이를 위해 속기를 사용합니다.
  • grid-column: 4 / 6
  • grid-column: starting-grid-line / ending-grid-line

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

    추가 리소스:


  • MDN CSS Grid
  • CSS-Tricks Grid
  • Basic Concepts of Grid Layout
  • w3schools Grid Layout
  • 좋은 웹페이지 즐겨찾기