목차
- Grid Container 의미 / 생성법
- grid-template-columns 속성 - 열 제어
- grid-template-rows 속성 - 행 제어
- justify-content 속성 - 수평 정렬
- align-content 속성 - 수직 정렬
※ 그리드 컨테이너에 사용되는 속성은 '속성(C)'로 표시.
Grid Container 의미 / 생성법
1. 의미
- Grid 의미 : 가로 너비를 지정 개수로 나눈 바둑판식 행열 레이아웃 구성.
- Grid Container 의미 : 아이템을 Grid 방식으로 정렬 시, 아이템 감싸는 요소.
2. Grid Container로 사용할 요소에 아래 속성 추가.
- display:grid - 가로 전체 너비를 지정 개수로 나눠 배분.
- display:inline-grid - 아이템 감싸는 크기 만큼만 너비 사용.
grid-template-columns 속성 - 열 제어
그리드 각 열(Column: 세로줄)의 개수와 너비를 지정. 자세히 보기
[예제1] - 4열의 각 너비를 동일하게 자동 결정.
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
PS. 아이템이 4열 초과 시, 자동으로 행이 추가됨.
[예제2] - 4열의 각 너비를 각각 별도로 지정.
.grid-container {
display: grid;
grid-template-columns: 80px 120px auto 160px;
}
grid-template-rows 속성 - 행 제어
그리드 각 행(Row: 가로줄)의 높이를 지정. 자세히 보기
[예제1] - 첫 행의 높이만 100px 지정. (나머지는 자동 결정)
.grid-container {
display: grid;
grid-template-rows: 100px;
}
[예제2] - 1행과 2행은 별도 지정. (나머지는 자동 결정.)
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
}
justify-content 속성 - 수평 정렬
그리드 컨테이너 내부의 아이템들 수평 정렬 방식 지정. 자세히 보기
PS. justify-content 속성 적용 조건: (그리드 전체 너비 < 컨테이너 너비)
[예제1] - 양끝과 각 아이템간 간격 동일. (∴ 양끝 간격 = 아이템간 간격)
.grid-container {
display: grid;
justify-content: space-evenly;
}
[예제2] - 각 아이템 양쪽 여백 동일 (∴ 양끝 간격 < 아이템간 간격)
.grid-container {
display: grid;
justify-content: space-around;
}
[예제3] - 양쪽 끝에 붙이고, 나머지 가운데는 균등 간격으로 배치.
.grid-container {
display: grid;
justify-content: space-between;
}
[예제4] - 가운데 몰아 배치
.grid-container {
display: grid;
justify-content: center;
}
[예제6] - 왼쪽에 몰아 배치.
.grid-container {
display: grid;
justify-content: start;
}
[예제7] - 오른쪽에 몰아 배치.
.grid-container {
display: grid;
justify-content: end;
}
align-content 속성 - 수직 정렬
그리드 컨테이너 내부의 아이템들 수직 정렬 방식 지정. 자세히 보기
PS. align-content 속성 적용 조건: (그리드 전체 높이 < 컨테이너 높이)
[예제1] - 상하 맨끝과 아이템간 간격 모두 동일.
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
[예제2] - 각 아이템의 상하 여백 동일 (∴ 상하양끝간격 < 아이템 간격)
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
[예제3] - 맨위와 맨아래는 붙이고, 나머지 가운데는 행간 간격 균등.
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
[예제4] - 가운데 몰아 배치.
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
[예제5] - 맨 위에 몰아 배치.
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
[예제6] - 맨 아래 몰아 배치.
.grid-container {
display: grid;
height: 400px;
align-content: end;
}
