CSS CSS 그리드 레이아웃 (Grid Layout) 기초설명
페이지 정보
조회 60회
본문
CSS 그리드 레이아웃 기초설명
CSS 그리드 레이아웃은 페이지를 행(Row)과 열(Column)로 나누어 요소를 배치할 수 있는 2차원(2D) 레이아웃 시스템입니다.
Flexbox가 1차원(한 방향) 레이아웃에 최적화되어 있다면, Grid는 복잡한 웹 페이지 구조를 설계하는 데 가장 강력한 도구입니다.
플렉스 박스 레이아웃은 주축/교차축 개념이 있지만 css 그리드 레이아웃은 양쪽 방향 모두 사용
(플렉스 그리드 레이아웃은 1차원, css 그리드 레이아웃은 2차원이라고도 함)
행(row)과 열(column)로 화면을 구성하고, 필요할 경우 그리드 항목 사이에 간격을 둘 수 있다.
1. 핵심 개념
Grid Container (그리드 컨테이너):
display: grid;를 설정한 부모 요소입니다.Grid Item (그리드 아이템): 컨테이너 내부의 직계 자식 요소들입니다.
Grid Line (그리드 라인): 그리드를 나누는 경계선입니다. 번호(1, 2, 3...)로 참조합니다.
Grid Cell (그리드 셀): 그리드의 가장 작은 단위(한 칸)입니다.
Grid Track (그리드 트랙): 두 라인 사이의 행 또는 열 전체를 의미합니다.
Grid Area (그리드 영역): 여러 셀을 합쳐 만든 사각형 영역입니다.
2. 컨테이너 속성 (부모 요소)
그리드의 틀을 잡을 때 사용하는 주요 속성입니다.
grid-template-columns/grid-template-rows: 열과 행의 크기를 정의합니다.fr단위: 유연한 비율(fraction)을 의미합니다. (예:1fr 2fr은 1:2 비율)repeat(): 반복되는 크기를 간편하게 작성합니다.
gap: 그리드 아이템 사이의 간격을 설정합니다.
grid-template-areas: 각 영역에 이름을 붙여 레이아웃을 시각적으로 배치합니다.
CSS
.container {
display: grid;
grid-template-columns: 200px 1fr 1fr; /* 세 개 열 생성 */
grid-template-rows: auto 100px; /* 두 개 행 생성 */
gap: 10px; /* 아이템 사이 간격 10px */
}
3. 아이템 속성 (자식 요소)
특정 아이템이 그리드 내 어디에 위치할지 결정합니다.
grid-column/grid-row: 시작 라인과 끝 라인 번호를 지정합니다.span키워드: 몇 칸을 차지할지 지정합니다.
grid-area: 컨테이너에서 정의한 영역 이름을 할당합니다.
CSS
.item {
grid-column: 1 / 3; /* 1번 라인부터 3번 라인까지 (2칸 차지) */
grid-row: span 2; /* 현재 위치에서 아래로 2칸 차지 */
}
4. Flexbox vs Grid 비교
구분 | Flexbox | CSS Grid |
차원 | 1차원 (행 또는 열 중 하나) | 2차원 (행과 열 동시 제어) |
정렬 기준 | 콘텐츠 중심 (Content-first) | 레이아웃 중심 (Layout-first) |
주요 용도 | 메뉴 바, 단순 정렬, 요소 간 간격 | 전체 웹사이트 레이아웃, 대시보드 |
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS Grid Layout</title> <style> /* 그리드 컨테이너에서 열과 행 지정하기 */ .container { display:grid; grid-template-columns: 100px 200px 300px; grid-template-rows: 50px 100px; } .items{ border: 1px solid #222; padding:10px; font-size: 20px; text-align: center; } .items:nth-child(even) { background-color:#ffc400; } </style> </head> <body> <div class="container"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> </div> </body> </html> |
