1.1 Grid Layout의 기본 원칙
CSS Grid Layout은 복잡하고 적응력 있는 레이아웃을 만들기 위한 강력한 도구야. 이 도구는 개발자에게 요소 배치를 위한 2차원 그리드 시스템을 제공해서, 간단한 레이아웃은 물론 복잡한 레이아웃도 쉽게 만들 수 있어. CSS Grid의 기본 개념과 문법을 살펴보자, 특정 속성에 깊이 들어가지는 않을 거야.
CSS Grid의 기본 개념
- Grid 컨테이너와 Grid 요소들:
- Grid 컨테이너는
display: grid를 포함하는 요소야. 이 요소는 그리드 컨테이너가 되고, 그 안에 있는 모든 자식 요소들은 Grid 요소가 돼 - Grid 요소는 Grid 컨테이너의 직계 자식 요소들이야, 그리드 안에 배치되어 있어
- Grid 컨테이너는
- 그리드 축:
- 주축 (inline axis)와 블록 축 (block axis): Grid는 요소 배치를 위한 두 개의 축을 지원해 — 주축과 블록 축. 기본적으로 주축은 수평으로 가고, 블록 축은 수직으로 가
- 그리드 셀 (Grid Cells):
- 그리드 셀은 행과 열이 교차하는 곳에서 형성되는 기본 블록들이야. 각 Grid 요소는 하나 이상의 셀을 차지해
- 그리드 라인 (Grid Lines):
- 그리드 라인은 행과 열을 구분하는 수평 및 수직선이야. 요소를 그리드에 상대적으로 배치하는 데 사용돼
- 그리드 영역 (Grid Areas):
- 그리드 영역은 여러 셀을 결합하여 생성된 이름이 있는 그리드 영역이야. 셀을 그룹화하고 특정 영역에 요소를 배치할 수 있게 해줘
1.2 문법 요소들
CSS Grid의 기본 문법 요소들
1. Grid 컨테이너 생성:
.container {
display: grid; /* 또는 display: inline-grid */
}
2. 그리드 구조 정의:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* 서로 다른 너비의 세 열을 정의 */
grid-template-rows: 50px 100px; /* 서로 다른 높이의 두 행을 정의 */
}
3. grid-area를 통한 셀 병합:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* 요소가 첫 번째 행과 처음 세 열을 차지 */
}
4. 요소 자동 배치:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* 행의 최소 높이를 지정 */
}
1.3 예제들
CSS Grid를 이용한 간단한 레이아웃:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 예제</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
설명:
- 컨테이너 .container는 첫 번째와 세 번째 열이 가용 공간의 동일한 비율을 차지하고 두 번째 열이 두 배를 차지하도록 설정돼
- 고정된 높이의 두 개의 행이 지정돼
- 속성 gap은 그리드 셀 간의 간격을 지정해
GO TO FULL VERSION