8.1 justify-content 속성
CSS Grid Layout는 그리드 컨테이너를 사용 가능한 공간 내에서 정렬하는 강력한 도구를 제공해.
justify-content, align-content, place-content 속성들은
컨테이너 내 행과 열을 정렬하여 레이아웃을 만들 때 유연성과 정확성을 보장해.
justify-content 속성은 컨테이너 내에서 전체 그리드의 수평 정렬을 관리해. 이 속성은
컨테이너의 크기가 그리드의 필요한 너비보다 클 때 유용해.
구문:
.grid-container {
display: grid;
justify-content: value;
}
어디서: value는 다음 값을 가질 수 있어:
start: 그리드를 컨테이너의 시작 위치로 정렬해end: 그리드를 컨테이너의 끝 위치로 정렬해center: 그리드를 컨테이너의 가운데로 정렬해stretch: 그리드를 늘려서 컨테이너 전체를 채워space-around: 각 요소 주변에 동일한 공간을 둬space-between: 요소들 사이에 동일한 공간을 둬space-evenly: 요소와 컨테이너 가장자리 사이에 동일한 공간을 둬
예제 1: 컨테이너 시작점에 정렬하기
이 예제에서는 모든 내용이 컨테이너의 왼쪽 가장자리에 정렬될 거야:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: start; /* 내용을 컨테이너의 왼쪽 가장자리에 정렬해 */
}
예제 2: 내용 중앙 정렬하기
이 예제에서는 모든 내용이 컨테이너 내에서 중앙에 위치할 거야:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center; /* 컨테이너 내에서 내용을 중앙에 위치시켜 */
}
8.2 align-content 속성
align-content 속성은 grid 컨테이너 내 수직 축을 따라 그리드 내용을 어떻게 정렬할지를 결정해.
그리드가 사용 가능한 수직 공간을 다 채우지 않을 때 유용해.
구문:
.grid-container {
align-content: value;
}
어디서: value는 수직 정렬을 결정하는 값이야. 가능한 값은:
start: 내용을 컨테이너의 시작 위치로 정렬해end: 내용을 컨테이너의 끝 위치로 정렬해center: 컨테이너 내에서 내용을 가운데로 정렬해space-between: 요소들 사이에 동일한 거리를 둬space-around: 각 요소 주변에 동일한 거리를 둬space-evenly: 요소와 컨테이너 가장자리 사이에 동일한 거리를 둬stretch(기본값): 내용을 늘려서 모든 사용 가능한 공간을 다 채워
예제 1: 컨테이너 시작점에 정렬하기
이 예제에서는 모든 내용이 컨테이너의 위쪽 가장자리에 정렬될 거야:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: start; /* 내용을 컨테이너의 위쪽 가장자리에 정렬해 */
}
예제 2: 내용 중앙 정렬하기
이 예제에서는 모든 내용이 컨테이너 내에서 중앙에 위치할 거야:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: center; /* 컨테이너 내에서 내용을 중앙에 위치시켜 */
}
8.3 place-content 속성
place-content 속성은 justify-content와 align-content 값을 동시에
설정할 수 있는 축약형이야.
구문:
.grid-container {
place-content: justify-value align-value;
}
어디서:
justify-value: 수평 정렬을 위한 값 (justify-content)align-value: 수직 정렬을 위한 값 (align-content)
예제 1: 수평 및 수직 중앙 정렬하기
이 예제에서는 모든 내용이 컨테이너 내에서 수평 및 수직으로 중앙에 위치할 거야:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
place-content: center center; /* 수평 및 수직으로 내용을 중앙에 위치시켜 */
}
예제 2: 가로로 늘리고 위쪽 가장자리에 정렬하기
이 예제에서는 내용이 컨테이너의 너비로 늘어나고 위쪽 가장자리에 정렬될 거야:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
place-content: stretch start; /* 내용을 가로로 늘리고 위쪽 가장자리에 정렬해 */
}
8.4 전체 구현 예제
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 고정 너비 세 개의 열 */
grid-template-rows: repeat(3, 100px); /* 고정 높이 세 개의 행 */
gap: 10px;
place-content: center center; /* 수평 및 수직으로 내용을 중앙에 위치시켜 */
}
.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 컨테이너 정렬 예제</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 컨테이너를 생성해.place-content속성을 사용하여 수평 및 수직으로 내용을 중앙에 위치시켜. -
.grid-item: 그리드 요소의 기본 스타일을 정의해, 예를 들어 배경색, 텍스트 색상, 패딩, 텍스트 정렬 및 테두리 등.
GO TO FULL VERSION