목차
- Grid Item 예제
- Grid Item 의미
- grid-column 속성 - 가로 크기
- grid-row 속성 - 세로 크기
- grid-area 속성1 - 영역 지정
- grid-area 속성2 - 이름 짓기
- grid-area 속성3 - 순서 지정
Grid Item 예제
<style>
.grid-container {
display: grid;
gap: 10px;
background-color: pink;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 10px 0;
font-size: 30px;
}
.a {
grid-column: 1 / span 2;
grid-row: 1;
}
.b {
grid-column: 3;
grid-row: 1 / span 2;
}
.e {
grid-column: 1 / span 3;
grid-row: 3;
}
</style>
<div class="grid-container">
<div class="grid-item a">a</div>
<div class="grid-item b">b</div>
<div class="grid-item d">c</div>
<div class="grid-item d">d</div>
<div class="grid-item e">e</div>
</div>
결과보기
Grid Item 의미
그리드 컨테이너 (Grid Container)의 자식요소들로서, 그리드 레이아웃 따라 배치될 요소들.
※ 각 아이템은 기본적으로 1행1열 차지하나, 여러행 여러열 지정 가능.
grid-column 속성 - 가로 크기
아이템 시작열 위치(grid-column-start 속성)과 끝열 위치(grid-column-end 속성)를 한번에 지정해 아이템 가로 크기 지정 가능. 자세히보기
[예제1] 1열부터 5열 바로 앞까지 (즉, 5열은 포함 X)
.item1 {
grid-column: 1 / 5;
}
결과보기
[예제2] - 1열부터 시작해 3개열 확장
.item1 {
grid-column: 1 / span 3;
}
결과보기
grid-row 속성 - 세로 크기
아이템 시작행 위치(grid-row-start 속성)과 끝행 위치(grid-row-end 속성)를 한번에 지정해 아이템 세로 크기 지정 가능. 자세히보기
[예제1] - 1행부터 시작해 4행 바로 앞까지 (즉, 4행은 포함 X)
.item1 {
grid-row: 1 / 4;
}
결과보기
[예제2] - 1행부터 시작해 2개 행 확장.
.item1 {
grid-row: 1 / span 2;
}
결과보기
grid-area 속성1 - 영역 지정
2가지 방식으로 아이템의 영역을 직접 지정 가능.
- 시작행열과 끝행열 지정
- 시작행열과 확장할 행열수 지정
[시작행열과 끝행열 지정]
(예) 1행부터 시작해 5행 바로 앞까지, 2열부터 시작해 6열 바로 앞까지.
.item1 {
grid-area: 1 / 2 / 5 / 6;
}
결과보기
[시작행열과 확장할 행열수 지정]
(예) 2행부터 시작해 2개행 확장 사용, 1열부터 시작해 3개열 확장 사용.
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
결과보기
grid-area 속성2 - 이름 짓기
아이템의 각 영역 이름 짓고, grid-template-areas 속성으로 영역 지정.
[예제1] - 1행 1/2/3/45열을 모두 사용.
.item1 {
grid-area: hz;
}
.grid-container {
grid-template-areas: 'hz hz hz hz hz';
}
결과보기
[예제2] - 1행의 1/2열만 사용.
.item1 {
grid-area: hz;
}
.grid-container {
grid-template-areas: 'hz hz . . .';
}
결과보기
[예제3] - 1행의 1/2열과 2행의 1/2열 사용.
.item1 {
grid-area: hz;
}
.grid-container {
grid-template-areas: 'hz hz . . .' 'hz hz . . .';
}
결과보기
[예제4] - 3단 레이아웃 구성
.item1 { grid-area: header; }
.item2 { grid-area: left; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'left main main main right right'
'left footer footer footer footer footer';
}
결과보기
grid-area 속성3 - 순서 지정
그리드 컨테이너에서 grid-template-columns 속성으로 사용할 열 개수와 너비 지정 후, 그리드 아이템에서 grid-area 속성으로 각각의 위치 지정.
[예제1] - 각각의 아이템 위치 지정
.grid-container {
grid-template-columns: auto auto auto;
}
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
결과보기
[예제2] - 반응형 (= 모바일기기 경우 순서 별도 지정)
<style>
.grid-container {
grid-template-columns: auto auto auto;
}
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
</style>
결과보기
