6.1 grid-gap 속성
CSS Grid Layout은 그리드 요소 사이의 공간을 관리하기 위한 유연한 도구를 제공합니다. 속성
grid-gap, grid-row-gap, grid-column-gap은 행과 열 사이의 거리를 쉽게 설정할 수 있게 하여 깔끔하고 체계적인 레이아웃을 만들 수 있게 도와줍니다. 이 속성에 대해 자세히 살펴보겠습니다.
grid-gap 속성(짧게 gap)은 그리드의 행과 열 사이의 전체 거리를 정의합니다.
이 속성은 grid-row-gap과 grid-column-gap의 축약형입니다.
문법:
.grid-container {
grid-gap: value;
}
여기에서:
-
value: 행과 열 사이의 간격 값. 다양한 단위로 지정 가능 (px,%,fr,auto등)
예제 1: 행과 열에 동일한 간격 적용하기
이 예제에서는 20px의 간격이 행과 열에 모두 적용됩니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* 모든 행과 열 사이의 20px 간격 */
}
예제 2: 행과 열에 다른 간격 적용하기
이 예제에서는 두 개의 값: 첫 번째는 행을 위한 10px, 두 번째는 열을 위한 20px입니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* 행 사이의 10px, 열 사이의 20px */
}
6.2 grid-row-gap 속성
grid-row-gap 속성은 그리드의 행 사이의 거리를 정의합니다. 이는 열과 관계없이 행 사이의 간격 값을 별도로 지정할 수 있게 해줍니다.
문법:
.grid-container {
grid-row-gap: value;
}
여기에서:
value: 행 사이의 간격 값. 다양한 단위로 지정 가능
예제 1: 행 사이의 고정 간격 설정
이 예제에서는 행 사이의 거리가 15px입니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* 행 사이의 15px 간격 */
}
예제 2: 퍼센트를 사용한 간격 설정
이 예제에서는 행 사이의 거리가 행 높이의 5%입니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* 행 높이의 5% 간격 */
}
6.3 grid-column-gap 속성
grid-column-gap 속성은 그리드의 열 사이의 거리를 정의합니다. 이는 행과 관계없이 열 사이의 간격 값을 별도로 지정할 수 있게 해줍니다.
문법:
.grid-container {
grid-column-gap: value;
}
여기에서:
value: 열 사이의 간격 값. 다양한 단위로 지정 가능
예제 1: 열 사이의 고정 간격 설정
이 예제에서는 열 사이의 거리가 25px입니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* 열 사이의 25px 간격 */
}
예제 2: em을 사용한 간격 설정
이 예제에서는 열 사이의 거리가 2em입니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* 열 사이의 2em 간격 */
}
6.4 grid-row-gap과 grid-column-gap의 조합 사용
grid-row-gap과 grid-column-gap 속성을 결합하여 행과 열 사이의 간격을 더 정확하게 관리할 수 있습니다.
완전한 구현 예제:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 동일한 너비의 세 열 */
grid-template-rows: repeat(3, 100px); /* 고정 높이의 세 행 */
grid-row-gap: 15px; /* 행 사이의 15px 간격 */
grid-column-gap: 25px; /* 열 사이의 25px 간격 */
}
.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>grid-gap, grid-row-gap, grid-column-gap 사용 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">아이템 1</div>
<div class="grid-item item2">아이템 2</div>
<div class="grid-item item3">아이템 3</div>
<div class="grid-item item4">아이템 4</div>
<div class="grid-item item5">아이템 5</div>
<div class="grid-item item6">아이템 6</div>
</div>
</body>
</html>
코드 설명:
-
.grid-container: 동일한 너비의 세 열과 고정 높이의 세 행으로 구성된 Grid 컨테이너를 생성합니다.grid-row-gap과grid-column-gap속성을 사용하여 행과 열 사이의 간격을 지정합니다. -
.grid-item: 그리드 요소의 기본 스타일을 정의합니다. 배경 색상, 텍스트 색상, 여백, 텍스트 정렬 및 테두리 등
GO TO FULL VERSION