elex/css-examples

Fork 0

Files

Elex 7936270d10 2025-02-03T13:25:31

2025-02-03 13:25:31 +09:00

4.8 KiB

Raw Blame History

CSS Grid

CSS Grid는 웹 페이지 레이아웃을 만들기 위한 강력한 2D(행+열) 레이아웃 시스템이야.

Flexbox가 1차원(가로 또는 세로) 정렬을 위한 도구라면, Grid는 2차원(가로+세로) 정렬을 위한 도구

컨테이너 속성	설명	옵션
grid-template-columns	열 개수 및 크기 설정
grid-template-rows	행 개수 및 크기 설정
grid-gap	그리드 간격 설정	= row-gap + column-gap = gap
grid-auto-rows	자동 크기 설정
grid-auto-columns	자동 크기 설정
grid-auto-flow	아이템 자동 배치 방향
grid-template-areas	그리드 레이아웃을 시각적으로 구성
align-items
justify-content

아이템 속성	설명	옵션
grid-column	열 영역 지정	= grid-column-start + grid-column-end
grid-row	행 영역 지정	= grid-row-start + grid-row-end
grid-area	그리드 영역 지정
align-self

CSS Grid 개념 및 기본 구조

CSS Grid는 grid container(부모)와 grid items(자식)으로 구성됨.

.container {
  display: grid;
} /* 이렇게 하면 .container 안의 모든 요소(grid items)가 그리드 아이템으로 변함! */

Grid 컨테이너 속성

Grid 레이아웃을 설정하는 부모 요소의 속성들

grid-template-columns

그리드의 열(가로) 개수와 크기를 정의!

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
} /* 200px 크기의 열이 3개 생성됨! */

반응형으로 자동 크기 조정

fr 단위 사용

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
} /* 각 열이 동일한 너비(1fr = 1 fraction)로 자동 조정됨! */

grid-template-rows

그리드의 행(세로) 크기를 정의!

.container {
  display: grid;
  grid-template-rows: 60px 1fr;
}

grid-gap = gap = row-gap + column-gap

그리드 아이템 간의 간격을 조절!

row-gap : 행 간격
column-gap : 열 간격

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px; /* 모든 열과 행 사이에 10px 간격 추가! */
}

grid-auto-rows / grid-auto-columns

명시되지 않은 행 또는 열의 크기를 설정

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-auto-rows: 150px;
} /* 설정된 열 개수보다 많은 아이템이 추가되면, 자동으로 150px 높이의 행이 생성됨! */

grid-auto-flow

그리드 아이템을 자동으로 배치하는 방향을 결정

row : 행 기준 자동 배치 (기본값)
column : 열 기준 자동 배치
dense : 빈 공간을 채우도록 자동 배치

.container {
  display: grid;
  grid-auto-flow: column;
} /* 아이템이 행이 아니라 열 방향으로 자동 배치됨! */

grid-template-areas

그리드 컨테이너에서 영역을 이름으로 정의하고, 자식 요소를 해당 영역에 배치할 수 있음!

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

Grid 아이템 속성

각 개별 아이템에 적용하는 속성들!

grid-column

아이템이 차지할 열(column)의 시작과 끝을 지정

.item {
  grid-column: 1 / 3; /* 1번째 열에서 시작해서 3번째 열까지 차지 */
}

줄여서 작성 가능

grid-column: span 2; /* 현재 위치에서 2칸 차지! */

grid-row

아이템이 차지할 행(row)의 시작과 끝을 지정

.item {
  grid-row: 2 / 4; /* 2번째 행에서 시작해서 4번째 행까지 차지 */
}

grid-area

한 번에 행과 열을 설정할 수 있음! grid-template-areas에서 사용될 이름을 지정

.item {
  grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end */
}

.header {
  grid-area: header;
}

repeat(), minmax(), auto-fit, auto-fill

복잡한 그리드 설정을 더 쉽게 만드는 기능들!

repeat(n, 크기)

반복 그리드 생성

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
} /* 1fr 크기의 열을 3개 자동 생성! */

minmax(최소, 최대)

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
} /* 열 크기가 최소 100px, 최대 1fr로 자동 조정됨! */

auto-fill

그리드 크기에 맞춰 최대한 많은 열 생성

auto-fit

아이템이 존재하는 열만 생성, 빈 공간 제거

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

4.8 KiB Raw Blame History