3.1 grid-template-columns 속성
CSS Grid Layout은 행과 열을 사용하여 복잡한 웹 페이지 레이아웃을 만들 수 있게 해줘. Grid의 구조를 정의하기 위한 두 가지 주요 속성은 grid-template-rows와 grid-template-columns야. 이 속성들은 Grid 컨테이너 안의 행과 열의 개수와 크기를 설정할 수 있게 해주어, 개발자에게 요소 배치에 대한 완전한 제어권을 준다구.
grid-template-columns 속성은 그리드에서 열의 개수와 크기를 정의해. 이 속성은 여러 개의 값들을 가질 수 있는데, 예를 들어 픽셀(px), 퍼센트(%), 비율(fr) 등의 다양한 단위로 지정할 수 있어.
예제 1: 고정된 크기의 열 지정하기
이 예제에서는 그리드가 세 개의 열로 구성돼. 첫 번째 열의 너비는 100px, 두 번째 열의 너비는 200px, 세 번째 열의 너비는 100px이야:
.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px; /* 고정 크기를 가진 세 개의 열 */
}
예제 2: 비율 단위 (fr) 사용하기
이 예제에서는 그리드가 세 개의 열로 구성돼. 첫 번째와 세 번째 열은 동일한 공간을 차지하고, 두 번째 열은 각 열보다 두 배 더 넓어:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 비율 크기를 가진 세 개의 열 */
}
예제 3: 반복 (repeat) 사용하기
이 예제에서는 repeat 함수를 사용해서 코드를 간단하게 할 수 있어. 그리드는 동일한 너비를 가진 세 개의 열로 구성돼:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 동일한 세 개의 열 */
}
예제 4: 최소 및 최대 크기 지정 (minmax)
이 예제에서는 세 개의 열 각각이 최소 너비 100px를 가지고, 공간에 따라 최대 1fr까지 유동적으로 커질 수 있어:
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 최소 너비 100px 및 유동적인 크기를 가진 세 개의 열 */
}
3.2 grid-template-rows 속성
grid-template-rows 속성은 grid-template-columns와 유사하지만, 행의 개수와 크기를 정의해. 이 속성도 다양한 단위의 값을 가질 수 있어.
예제 1: 고정된 크기의 행 지정하기
이 예제에서는 그리드가 세 개의 행으로 구성돼. 첫 번째 행의 높이는 50px, 두 번째 행의 높이는 100px, 세 번째 행의 높이는 50px이야:
.grid-container {
display: grid;
grid-template-rows: 50px 100px 50px; /* 고정 크기를 가진 세 개의 행 */
}
예제 2: 비율 단위 (fr) 사용하기
이 예제에서는 그리드가 세 개의 행으로 구성돼. 첫 번째와 세 번째 행은 동일한 공간을 차지하고, 두 번째 행은 각 행보다 두 배 더 높아:
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr; /* 비율 크기를 가진 세 개의 행 */
}
예제 3: 반복 (repeat) 사용하기
이 예제에서는 repeat 함수를 사용해서 코드를 간단하게 할 수 있어. 그리드는 동일한 높이를 가진 세 개의 행으로 구성돼:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* 동일한 세 개의 행 */
}
예제 4: 최소 및 최대 크기 지정 (minmax)
이 예제에서는 세 개의 행 각각이 최소 높이 50px를 가지고, 공간에 따라 최대 1fr까지 유동적으로 커질 수 있어:
.grid-container {
display: grid;
grid-template-rows: repeat(3, minmax(50px, 1fr)); /* 최소 높이 50px 및 유동적인 크기를 가진 세 개의 행 */
}
3.3 속성 결합하기
grid-template-rows와 grid-template-columns 속성 결합하기
이 속성들은 다양한 크기의 행과 열을 가진 복잡한 그리드를 만들기 위해 함께 사용될 수 있어.
이 예제에서는 그리드가 두 개의 열로 구성돼: 첫 번째 열은 가용 공간의 1배를 차지하고, 두 번째 열은 2배를 차지해. 그리드는 또한 두 개의 행으로 구성돼: 첫 번째 행의 높이는 100px, 두 번째 행의 높이는 200px이야.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
}
전체 구현 예제:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">항목 1</div>
<div class="grid-item">항목 2</div>
<div class="grid-item">항목 3</div>
<div class="grid-item">항목 4</div>
</div>
</body>
</html>
코드 설명:
.grid-container: 두 개의 열과 두 개의 행을 가진 grid 컨테이너를 정의해. 요소 간의 간격은gap속성으로 설정돼..grid-item: 그리드 요소에 대한 기본 스타일을 정의해, 예를 들어 배경색, 텍스트 색상, 패딩, 텍스트 정렬, 테두리 등.
GO TO FULL VERSION