CSS_grid

Mary·2025년 2월 8일
0

CSS

목록 보기
19/19

📢 CSS Grid Layout이란?

CSS Grid Layout은 웹 페이지를 행(row)과 열(column) 단위의 격자로 배치할 수 있는 강력한 레이아웃 시스템

▶️
display: grid; 를 사용하면 요소들을 쉽게 정렬하고 배치할 수 있어!


1️⃣ 기본 개념

📌 CSS Grid는 2차원 레이아웃 시스템

  • Flexbox → 한 방향(가로 or 세로) 레이아웃
  • Grid행(row)과 열(column)을 모두 다룰 수 있는 2D 레이아웃

    grid-container → grid가 적용된 요소
    grid-item → grid가 적용된 요소의 자식 요소들
    grid-line → grid-item 사이의 경계를 의미
    grid-number → 해당 grid-line이 몇번째 line인지를 의미

grid-template

grid의 행&열의 개수 및 크기를 지정할 수 있음

grid-template-rows : 1fr 2fr 200px
grid-template-columns : 1fr 2fr 200px

단위: fr

이 때 사용되는 fr 이란 fraction(분수)의 약자

분수라는 이름의 뜻으로 유추할 수 있듯 grid-template에서 사용할 수 있는 비율 단위

repeate()

grid-template에는 repeat() 이라는 반복 함수도 써줄 수 있음

repeat(a, b)라고 입력하면, b규격의 grid-template을 a개 생성한다는 의미

grid-column & grid-row

grid-column 과 grid-row 는 grid-item에 줄 수 있는 속성

각각의 grid-item이 열과 행 방향으로 얼마만큼의 영역을 차지할 지 정의

이 때, 그 값에는 시작점이 되는 grid-number와 종료지점이 되는 grid-number를 입력


2️⃣ 기본 사용법

.container {
  display: grid;
  grid-template-columns: 100px 200px auto; /* 3개의 열 (100px, 200px, 나머지 자동) */
  grid-template-rows: 50px auto 100px; /* 3개의 행 */
  gap: 10px; /* 요소 간격 */
}

그리드 컨테이너 (.container)를 설정하면 내부 아이템이 자동으로 배치됨


grid-template-columns로 열 크기 조정

(1) 고정 크기 (픽셀, 퍼센트)

.container {
  display: grid;
  grid-template-columns: 200px 300px 100px; /* 3개의 열 크기 고정 */
}

✔ 1열: 200px / 2열: 300px / 3열: 100px

(2) fr(fraction) 비율로 크기 조정

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

비율로 크기 자동 조정 (1:2:1)

(3) repeat()로 반복

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3개의 열, 동일한 크기 */
}

3개의 열을 같은 크기로 자동 분배


grid-template-rows로 행 크기 조정

.container {
  display: grid;
  grid-template-rows: 100px auto 50px;
}

✔ 1행: 100px / 2행: 자동 크기 조정 / 3행: 50px


grid-columngrid-row로 아이템 배치

.item1 {
  grid-column: 1 / 3; /* 1번째부터 3번째 열까지 차지 */
  grid-row: 1 / 2; /* 1번째 행만 차지 */
}

grid-column: start / end;
grid-row: start / end;
그리드의 특정 위치를 지정 가능


grid-area로 자유로운 배치

.item1 { grid-area: header; }
.item2 { grid-area: main; }
.item3 { grid-area: sidebar; }
.item4 { grid-area: footer; }

.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto;
}

grid-template-areas를 사용하면 직관적인 배치 가능!


justify-content & align-content (정렬)

(1) 가로 정렬 (justify-content)

.container {
  display: grid;
  justify-content: center; /* 왼쪽, 가운데, 오른쪽 정렬 */
}

start | center | end | space-between | space-around

(2) 세로 정렬 (align-content)

.container {
  display: grid;
  align-content: center; /* 위쪽, 가운데, 아래 정렬 */
}

start | center | end | space-between | space-around


📢 최종 정리

속성설명
display: grid;Grid 레이아웃 활성화
grid-template-columns열 크기 설정
grid-template-rows행 크기 설정
grid-column아이템이 차지할 열 범위 지정
grid-row아이템이 차지할 행 범위 지정
grid-gap (or gap)아이템 간 간격 조정
grid-template-areas레이아웃을 직관적으로 배치
justify-content / align-content전체 그리드 정렬

0개의 댓글