[CSS] Grid Model

웹 페이지 컨텐츠를 쉽게 행과 열로 나눌 수있는 강력한 2차원 css 레이아웃 시스템이다.

📌 Flex Box와 Grid Model의 차이점?!

Flex Box

한 줄로 된 행 혹은 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었다. (1차원)
레이아웃을 조정할 때 오직 가로 행 혹은 세로 열 만 고려

Grid

그리드는 행과 열 모두를 염두에 둔 2차원적 레이아웃을 고려해서 설계되었다.
레아아웃을 조정할 때 가로 행과 세로 열 모두를 염두에 두고 작업

grid도 flex처럼 grid container(컨테이너)와 grid item(아이템)이라는 두 가지 개념으로 구분된다.

📌 용어 설명

✔ grid container

HTML 요소에 display 속성 값으로 grid를 설정하면 그리드 컨테이너가 되며, 자식 요소는 grid item이 된다.
그리드 컨테이너는 행과 열을 가지며, 그리드 아이템을 배치할 수 있다.

✔ grid item

grid container에 속해있는 하위 요소이다.

✔ grid track

grid layout에 존재하는 행 또는 열을 의미한다.

✔ grid line

grid track을 구분하는 선을 의미합니다. 각 선은 라인 넘버를 갖고 있으며, 선의 번호는 위에서 아래로(↓), 왼쪽에서 오른쪽으로(→) 메겨진다.

✔ grid cell

그리드 레이아웃에서 가장 작은 단위 요소이며, 아이템(item)이 배치되는 최소 단위의 영역이다. 그리드 셀은 4개의 그리드 라인이 묶여 그려지는 가장 작은 단위다.

✔ grid area

아이템이 배치되는, 하나 이상의 셀(cell)로 이루어진 영역이다. grid area는 항상 사각형의 모양을 가져야한다. (ㄴ자, ㄱ자 형태 불가능)
그리드 에어리어는 그리드 유닛이 묶인 영역으로 고유한 식별자를 가지며, 식별자를 통해 요소를 배치할 수 있다.

✔ grid gutters

그리드 거터는 행 또는 열 사이 간격(gap)을 말한다.
gap(row, column 동시 선언), row-gap, column-gap 속성으로 제어한다.

📌 grid의 함수들

💭 repeat

행/열(Track)의 크기 정의를 반복히며, '반복되는 횟수'와 '행/열의 크기 정의'를 인수로 사용한다.

grid-template-rows와 grid-template-columns에서 사용

.container {
  display: grid;
  /* repeat() 함수 사용법 */
  grid-template-rows: repeat(2, 1fr);        /* 1fr 1fr */
  grid-template-columns: repeat(3, 1fr 2fr); /* 1fr 2fr 1fr 2fr 1fr 2fr */
}

➡ example. 9컬럼 그리드

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px;
  /* 위 코드에 repeat함수를 사용하면 아래와 같습니다. */
  grid-template-columns: repeat(9, 100px);
}

➡ example. 12컬럼 그리드

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
  /* 위 코드에 repeat함수를 사용하면 아래와 같습니다. */
  grid-template-columns: repeat(6, 1fr 2fr);
}

💭 minmax

행/열(Track)의 '최소/최대 크기'를 정의

최솟값, 최댓값 범위 내에서 값을 유연하게 처리한다.
첫 번째 인수는 '최솟값'이고 두 번째 인수는 '최댓값'이다.
grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns에서 사용

➡ example.

.container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
}

/*
minmax()를 통해 암시적 행/열(Track) 크기를 좀 더 유연하게 사용할 수 있습니다.
다음 예제는 암시적 '행/열'의 크기를 최소 '200px/300px'으로 지정하지만 auto를 통해 그리드 아이템의 크기에 따라 확장될 수 있습니다.
*/
.container {
  display: grid;
  grid-auto-rows: minmax(200px, auto);
  grid-auto-columns: minmax(300px, auto);
}

.container {
  display: grid;
  /* minmax() 함수 사용법 */
  grid-template-rows: repeat(2, minmax(20px, auto));
  grid-template-columns: minmax(30px, auto) repeat(3, 1fr);
}

💭 fit-content

fit-content() 함수는 행/열(Track)의 크기를 그리드 아이템(Item)이 포함하는 내용(Contents) 크기에 춘다.

'내용의 최대 크기'를 인수로 사용한다.
minmax(auto, max-content)와 유사하다.

<style>

  .container {
    display: grid;
    grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
    grid-gap: 5px;
  }
</style>

<div id="container">
  <div>내용만큼만 적용되는 셀의 크기</div>
  <div>
    많은 텍스트가 있는 경우 fit-content로 정의한
    크기가 셀의 최대 크기가 됩니다.
    fit-content(300px)
  </div>
  <div>유연한 셀입니다.</div>
</div>

📌 grid 주요 단위

💭 fr (fractional unit)

사용 가능한 공간에 대한 비율을 의미한다.

그리드 트랙 사이즈로 사용 되는 fr 단위는 유연한 단위로 그리드 컨테이너의 여유 공간을 비율로 나눠 설정

/*
  그리드 컨테이너의 3번째 컬럼에 100px, 4번째 컬럼에 25%를 사용하고
  남은 공간을 1번째 컬럼에 ‘1/3’, 2번째 컬럼에 ‘2/3’ 만큼 사용합니다.
*/
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 100px 25%;
}

💭 min-content

그리드 아이템이 포함하는 내용(Contents)의 최소 크기를 의미

콘텐츠에 한글을 사용할 경우 단어가 묶여있어 아이템의 영역을 벗어날 때는 word-break: keep-all;을 선언하여 단어를 쪼개 줄바꿈 할 수 있게 설정하면 정상적으로 작동한다.

<style>
  .container {
    display: grid;
    grid-template-columns: min-content 1fr;
  }
</style>
<!-- 한글을 사용하는 경우 word-break: keep-all;를 설정하면 정상적으로 동작합니다. -->
<div class="container">
  <div class="item">내용의 최소 크기</div>
  <!-- ··· -->
</div>  

💭 max-content

그리드 아이템이 포함하는 내용(Contents)의 최대 크기를 의미

.container {
  display: grid;
  grid-template-columns: max-content 1fr;
}
/*
  그리드 함수들과 같이 더 유용하게 활용할 수 있습니다.
  다음 예제는 총 3컬럼 그리드를 생성하며 각 열(Track)은 최대 1fr 크기를 가지지만,
  max-content를 통해 포함된 그리드 아이템의 내용보다 작아질 수 없습니다.
*/
.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(max-content, 1fr));
}  

💭 auto-fill, auto-fit

아이템의 갯수를 알 수 없을 때 auto-fit, auto-fill을 사용

즉, 트랙에 값을 정확히 알 수 없을 때 해당 값들을 넣어준다.
행/열(Track)의 개수를 그리드 컨테이너(Container) 및 행/열 크기에 맞게 자동으로(암시적) 조정
repeat() 함수와 같이 사용하며, 행/열과 아이템(Item) 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용 (반응형 그리드)

/*
  다음 4컬럼 그리드 예제에서 컨테이너의 크기가 아이템들을 수용하기 충분하지 않은 경우 아이템은 넘치기 시작합니다.
  (아이템의 최소 크기가 100px입니다.)
*/
  .container {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
}
/*
  만약 4컬럼 그리드를 고집할 필요가 없다면,
  다음과 같이 '반복횟수'(repeat() 함수의 첫 번째 인수)를 auto-fill이나 auto-fit으로 수정할 수 있습니다.
  이는 컨테이너의 크기가 아이템들을 수용하기 충분하지 않을 경우
  아이템을 자동으로 줄 바꿈 처리하며, 그에 맞게 암시적 행/열도 자동으로 수정합니다.
*/
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

💭 auto-fill과 auto-fit의 차이

auto-fill과 auto-fit은 차이점은 그리드 컨테이너가 하나의 행/열(Track)에 모든 아이템을 수용하고 남는 공간이 있을 때 발생

auto-fill은 남는 공간(빈 트랙)을 그대로 유지하고, auto-fit은 남는 공간을 축소

출처: https://uxkm.io/publishing/css/04-cssAdvanced/05-css_grid_part1#gsc.tab=0