5.1 grid-auto-rows 속성
CSS Grid Layout은 요소를 자동으로 배치하는 데 뛰어난 도구를 제공합니다. grid-auto-rows, grid-auto-columns 및 grid-auto-flow 속성은 명시적으로 그리드에 배치되지 않은 요소의 동작을 제어하는 데 도움이 됩니다. 이 속성들을 좀 더 자세히 살펴보겠습니다.
grid-auto-rows 속성은 명시적으로 지정된 행을 벗어날 때 자동으로 추가되는 행의 높이를 결정합니다.
문법:
.grid-container {
grid-auto-rows: value;
}
여기서:
-
value: 자동으로 추가되는 행의 높이. 다양한 단위로 지정할 수 있습니다 (px,%,fr,auto등).
예시 1: 고정된 행 높이
이 예시에서는 자동으로 추가된 모든 행이 고정된 높이 100px를 갖게 됩니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 동일한 너비의 세 개의 열 */
grid-auto-rows: 100px; /* 자동으로 추가되는 행의 높이는 100px */
}
예시 2: 유연한 행 높이
이 예시에서는 자동으로 추가된 행이 최소 높이 100px를 갖지만 필요에 따라 늘어날 수 있습니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto); /* 최소 행 높이는 100px, 필요시 자동으로 커질 수 있음 */
}
5.2 grid-auto-columns 속성
grid-auto-columns 속성은 명시적으로 지정된 열을 벗어날 때 자동으로 추가되는 열의 너비를 결정합니다.
문법:
.grid-container {
grid-auto-columns: value;
}
여기서:
-
value: 자동으로 추가되는 열의 너비. 다양한 단위로 지정할 수 있습니다 (px,%,fr,auto등).
예시 1: 고정된 열 너비
이 예시에서는 자동으로 추가된 모든 열이 고정된 너비 100px를 갖게 됩니다:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px); /* 고정된 높이의 세 개의 행 */
grid-auto-columns: 100px; /* 자동으로 추가되는 열의 너비는 100px */
}
예시 2: 유연한 열 너비
이 예시에서는 자동으로 추가된 열이 최소 너비 100px를 갖지만 남은 공간의 한 부분만큼 늘어날 수 있습니다:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-columns: minmax(100px, 1fr); /* 최소 열 너비는 100px, 남은 공간의 한 부분만큼 커질 수 있음 */
}
5.3 grid-auto-flow 속성
grid-auto-flow 속성은 grid-row 및 grid-column 속성으로 명시적으로 지정되지 않은 요소를 그리드에 자동으로 배치하는 방법을 결정합니다.
문법:
.grid-container {
grid-auto-flow: value;
}
여기서:
value: 요소 배치 순서를 결정하는 값. 가능한 값:
row(기본값): 요소들이 행별로 배치됩니다.column: 요소들이 열별로 배치됩니다.dense: 빈 셀 없이 요소들이 밀집 배치됩니다 (row또는column과 함께 사용됨).
예시 1: 행별 배치
이 예시에서는 요소들이 행별로 배치되어 한 행씩 채워집니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* 요소들이 행별로 배치됩니다 */
}
예시 2: 열별 배치
이 예시에서는 요소들이 열별로 배치되어 한 열씩 채워집니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column; /* 요소들이 열별로 배치됩니다 */
}
예시 3: 밀집 배치
이 예시에서는 요소들이 행별로 밀집 배치되어 빈 셀의 수를 최소화합니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* 요소들이 행별로 밀집 배치됩니다 */
}
5.4 완전한 구현 예시
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 동일한 너비의 세 개의 열 */
grid-auto-rows: 100px; /* 자동으로 추가되는 행의 높이는 100px */
grid-auto-flow: row dense; /* 요소들이 행별로 밀집 배치됩니다 */
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 class="grid-item">요소 5</div>
<div class="grid-item">요소 6</div>
</div>
</body>
</html>
코드 설명:
-
.grid-container: 동일한 너비의 세 개의 열과 자동으로 추가된 행의 높이가100px인 Grid 컨테이너를 생성합니다. 요소들은 행별로 밀집 배치됩니다. -
.grid-item: 요소의 기본 스타일을 정의합니다. 배경색, 텍스트 색상, 패딩, 텍스트 정렬 및 테두리와 같은 스타일을 포함합니다.
GO TO FULL VERSION