7.1 justify-items 속성
CSS Grid Layout은 그리드 내부 요소의 정렬을 관리할 수 있는 효율적인 도구를 제공합니다. 속성
justify-items, align-items, place-items를 사용하여
grid-요소가 셀 내에서 수평 및 수직으로 배치되는 방법을 정확히 조정할 수 있습니다. 이 속성들을 자세히 살펴봅시다.
속성 justify-items는 그리드 전체 셀 안의 모든 grid-요소의 수평 정렬을 설정합니다.
구문:
.grid-container {
justify-items: value;
}
여기서:
-
value: 요소의 수평 정렬을 결정하는 값. 가능한 값들:start: 요소를 셀의 시작 부분에 정렬end: 요소를 셀의 끝 부분에 정렬center: 셀 내에서 요소를 중앙에 배치stretch(기본값): 요소를 셀의 전체 너비에 맞게 확장
예제 1: 셀 시작 부분에 정렬
이 예제에서는 모든 요소가 자신의 셀의 왼쪽 가장자리에 정렬됩니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: start; /* 모든 요소가 셀 시작 부분에 정렬됨 */
}
예제 2: 요소 중앙 배치
이 예제에서는 모든 요소가 자신의 셀 중앙에 배치됩니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center; /* 모든 요소가 셀 중앙에 배치됨 */
}
7.2 align-items 속성
속성 align-items는 그리드 전체 셀 안의 모든 grid-요소의 수직 정렬을 설정합니다.
구문:
.grid-container {
align-items: value;
}
여기서:
-
value: 요소의 수직 정렬을 결정하는 값. 가능한 값들:start: 요소를 셀의 시작 부분에 정렬end: 요소를 셀의 끝 부분에 정렬center: 셀 내에서 요소를 수직으로 중앙에 배치stretch(기본값): 요소를 셀의 전체 높이에 맞게 확장
예제 1: 셀 시작 부분에 정렬
이 예제에서는 모든 요소가 자신의 셀의 위쪽 가장자리에 정렬됩니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
align-items: start; /* 모든 요소가 셀 위쪽에 정렬됨 */
}
예제 2: 수직 중앙 배치
이 예제에서는 모든 요소가 자신의 셀 안에서 수직으로 중앙에 배치됩니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
align-items: center; /* 모든 요소가 셀 안에서 수직으로 중앙에 배치됨 */
}
7.3 place-items 속성
속성 place-items는 align-items와 justify-items의 값을 동시에 지정하기 위한 단축 표현입니다.
구문:
.grid-container {
place-items: align-value justify-value;
}
여기서:
align-value: 셀 내부의 수직 정렬 값을 설정하는 값 (align-items)justify-value: 셀 내부의 수평 정렬 값을 설정하는 값 (justify-items)
하나의 값만 place-items 속성에 지정하면, 예를 들어 place-items: stretch라고 하면, 요소가 양쪽 방향으로 정렬됩니다.
예제 1: 양 방향으로 요소 중앙 배치
이 예제에서는 모든 요소가 셀 내에서 수평 및 수직 방향으로 중앙에 배치됩니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
place-items: center; /* 요소가 양쪽 방향으로 중앙에 배치됨 */
}
예제 2: 높이로 요소 확장 및 좌측 상단 정렬
이 예제에서는 모든 요소가 높이로 확장되고 셀의 좌측 상단에 정렬됩니다:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
place-items: stretch start; /* 요소가 셀의 전체 높이로 확장되고 좌측 상단에 정렬됨 */
}
7.4 전체 구현 예제
전체 구현 예제:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 세 개의 동일한 너비를 가진 열 */
grid-template-rows: repeat(3, 100px); /* 세 개의 고정 높이를 가진 행 */
gap: 10px;
place-items: 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>CSS 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-items를 사용하여 요소를 수평 및 수직 방향으로 중앙에 배치합니다. -
.grid-item: 그리드 요소의 기본 스타일을 정의합니다. 배경색, 글자색, 여백, 텍스트 중앙 정렬, 테두리 등
GO TO FULL VERSION