CSS Grid

CSS Grid는 웹 페이지의 레이아웃을 구성하는 강력한 방법 중 하나로, 2차원(행과 열) 배치를 효율적으로 관리할 수 있는 CSS 모듈입니다. Flexbox가 1차원 레이아웃을 다룬다면, Grid는 행(row)과 열(column)을 동시에 조정할 수 있어 복잡한 레이아웃을 쉽게 구현할 수 있습니다.

1. Grid Container & Grid Item

• Grid Container: display: grid; 또는 display: inline-grid;를 적용한 요소. 내부 아이템들이 Grid 레이아웃을 따르게 됨.
• Grid Item: Grid Container의 직접적인 자식 요소.

2. CSS Grid의 주요 속성

속성	설명	가능한 값
display	요소를 Grid 컨테이너로 설정	grid, inline-grid
grid-template-columns	열의 개수 및 크기 설정	auto, 100px 1fr 2fr, repeat(3, 1fr), minmax(100px, 1fr)
grid-template-rows	행의 개수 및 크기 설정	auto, 50px 100px auto, repeat(2, minmax(50px, auto))
grid-template-areas	레이아웃 이름을 설정하여 배치	"header header" "sidebar content"
grid-column-gap, column-gap	열 사이의 간격 조정	10px, 2rem
grid-row-gap, row-gap	행 사이의 간격 조정	5px, 1em
gap	행과 열의 간격을 한 번에 설정	10px 20px (row gap, column gap)
justify-items	개별 아이템의 수평 정렬 방식	start, center, end, stretch
align-items	개별 아이템의 수직 정렬 방식	start, center, end, stretch
place-items	align-items + justify-items 속성을 한 번에 설정	center (가로+세로 중앙 정렬)
justify-content	전체 Grid 컨테이너 내의 아이템 정렬 (가로)	start, center, end, space-between, space-around
align-content	전체 Grid 컨테이너 내의 아이템 정렬 (세로)	start, center, end, space-between, space-around
place-content	align-content + justify-content 속성을 한 번에 설정	center
grid-auto-columns	암시적으로 생성되는 열 크기 설정	auto, 100px, 1fr
grid-auto-rows	암시적으로 생성되는 행 크기 설정	auto, minmax(100px, auto)
grid-auto-flow	아이템 자동 배치 방향 설정	row, column, row dense, column dense

2. Grid Item 속성

속성	설명	가능한 값
grid-column-start	해당 아이템이 시작할 열 번호	1, 2, span 2
grid-column-end	해당 아이템이 끝나는 열 번호	3, -1, span 2
grid-column	grid-column-start + grid-column-end	1 / 3, span 2 / 4
grid-row-start	해당 아이템이 시작할 행 번호	1, 2, span 3
grid-row-end	해당 아이템이 끝나는 행 번호	3, -1, span 2
grid-row	grid-row-start + grid-row-end	1 / 4, span 2 / 5
grid-area	아이템을 grid-template-areas와 연결	"header", "sidebar"
justify-self	개별 아이템의 수평 정렬	start, center, end, stretch
align-self	개별 아이템의 수직 정렬	start, center, end, stretch
place-self	align-self + justify-self 속성을 한 번에 설정	center

4. grid-template-areas를 사용한 레이아웃

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 50px 1fr 50px;
}

.header { grid-area: header; background: #ffcc00; }
.sidebar { grid-area: sidebar; background: #ff6666; }
.content { grid-area: content; background: #66ccff; }
.footer { grid-area: footer; background: #99cc66; }

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

5. grid-auto-flow를 사용한 자동 배치

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: row dense;
}

.item:nth-child(2) {
  grid-column: span 2;
}

<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>

추가

1) fr 단위란?

• fr(fraction) 단위는 Grid에서 사용되는 유연한 비율 단위입니다.
• 가용 가능한 공간을 비율에 따라 자동으로 나눕니다.

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

• 1fr 2fr 1fr은 전체 공간을 4등분하여 1:2:1 비율로 나눕니다.

2) repeat() 함수

• 같은 크기의 행 또는 열을 반복해서 생성할 때 사용됩니다.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

• 3개의 열을 동일한 크기(1fr)로 생성.

auto-fill 또는 auto-fit과 함께 사용 가능

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

• 화면 크기에 맞게 열을 자동으로 생성.

3) minmax(min, max) 함수

• 최소 크기와 최대 크기를 설정하여 유연한 크기 조정을 가능하게 합니다.

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

• 첫 번째 열은 최소 200px, 최대 1fr로 설정.

4) fit-content() 함수

• 콘텐츠 크기에 맞게 크기를 조정하되, 지정한 최대 크기를 넘지 않도록 설정.

.container {
  display: grid;
  grid-template-columns: fit-content(300px) 1fr;
}

• 첫 번째 열은 콘텐츠 크기에 맞지만, 최대 300px까지만 확장.

5) 암시적 그리드 vs 명시적 그리드

• 명시적 그리드(Explicit Grid): grid-template-columns, grid-template-rows를 사용하여 직접 설정한 행과 열.
• 암시적 그리드(Implicit Grid): 설정한 명시적 그리드 외에 추가된 요소가 자동으로 배치될 때 생성되는 행과 열.

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

• 명시적으로 열(2개)만 지정했지만, 행이 추가될 경우 자동으로 100px 높이로 생성.

6) auto-fill vs auto-fit

속성	설명
auto-fill	가능한 한 많은 열을 채우지만, 빈 칸을 유지할 수 있음
auto-fit	가능한 한 많은 열을 채우고, 빈 공간을 없앰

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

• auto-fill: 그리드 안에 빈 공간이 남아 있을 수 있음.

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

• auto-fit: 빈 공간 없이 가능한 최대한 늘어남.

7) 라인에 이름 지정하기

• grid-template-columns 또는 grid-template-rows에서 [이름]을 사용하여 특정 위치를 명명 가능.
  🔹 예제

.container {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 2fr [end];
}

.item {
  grid-column: start / middle; /* start에서 middle까지 */
}

• 이름을 사용하여 grid-column을 지정 가능.