CSS 그리드 항목
1
2
삼
4
5
하위 요소(항목)
그리드 컨테이너 에는 그리드 항목 이 포함됩니다 .
기본적으로 컨테이너에는 각 행의 각 열에 대해 하나의 그리드 항목이 있지만 여러 열 및/또는 행에 걸쳐 있도록 그리드 항목의 스타일을 지정할 수 있습니다.
그리드 열 속성:
grid-column속성은 항목을 배치할 열을 정의합니다 .
항목이 시작되는 위치와 항목이 끝나는 위치를 정의합니다.
1
2
삼
4
5
6
7
8
9
10
11
12
13
14
15
참고:grid-column 속성은 및 속성의 약식 속성 grid-column-start입니다 grid-column-end.
항목을 배치하려면 행 번호 를 참조 하거나 "span" 키워드를 사용하여 항목이 확장될 열 수를 정의할 수 있습니다.
예시
"item1"이 1열에서 시작하고 5열보다 먼저 끝나도록 합니다.
.item1 {
grid-column: 1 / 5;
}
예시
"item1"이 1열에서 시작하여 3열로 확장되도록 합니다.
.item1 {
grid-column: 1 / span 3;
}
예시
"item2"를 2열에서 시작하고 3열로 확장합니다.
.item2 {
grid-column: 2 / span 3;
}
grid-row 속성:
속성 은 grid-row항목을 배치할 행을 정의합니다.
항목이 시작되는 위치와 항목이 끝나는 위치를 정의합니다.
1
2
삼
4
5
6
7
8
9
10
11
12
13
14
15
16
참고:grid-row 속성은 및 속성의 약식 속성 grid-row-start입니다 grid-row-end.
항목을 배치하려면 행 번호 를 참조 하거나 "span" 키워드를 사용하여 항목이 확장될 행 수를 정의할 수 있습니다.
예시
"item1"이 행 1에서 시작하여 행 4에서 끝나도록 합니다.
.item1 {
grid-row: 1 / 4;
}
예시
"item1"이 1행에서 시작하여 2행에 걸쳐 있도록 합니다.
.item1 {
grid-row: 1 / span 2;
}
그리드 영역 속성
속성 은 , 및 grid-area속성에 대한 약식 속성으로 사용할 수
있습니다 .grid-row-startgrid-column-startgrid-row-endgrid-column-end
1
2
삼
4
5
6
7
8
9
10
11
12
13
14
15
예시
"item8"을 행 1행과 2행에서 시작하고 행 5행과 6행에서 끝내도록 합니다.
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
예시
"item8"을 행 2행과 열 행 1에서 시작하고 2행과 3열로 확장합니다.
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
그리드 항목 이름 지정
grid-area속성을 사용하여 그리드 항목에 이름을 할당할 수도 있습니다 .
헤더
메뉴
기본
오른쪽
보행인
명명된 그리드 항목은 grid-template-areas그리드 컨테이너의 속성으로 참조할 수 있습니다.
예시
Item1은 "myArea"라는 이름을 가져오고 5개 열 그리드 레이아웃의 5개 열 모두에 걸쳐 있습니다.
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
각 행은 아포스트로피(' ')로 정의됩니다.
각 행의 열은 공백으로 구분된 아포스트로피 내부에 정의됩니다.
참고: 마침표 기호는 이름이 없는 그리드 항목을 나타냅니다.
예시
"myArea"가 5열 그리드 레이아웃의 2열에 걸쳐 있도록 하십시오(마침표 기호는 이름이 없는 항목을 나타냄).
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
두 개의 행을 정의하려면 다른 아포스트로피 세트 안에 두 번째 행의 열을 정의하십시오.
예시
"item1"이 두 개의 열과 두 개의 행에 걸쳐 있도록 합니다 .
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
예시
모든 항목의 이름을 지정하고 바로 사용할 수 있는 웹 페이지 템플릿을 만듭니다.
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
아이템의 순서
그리드 레이아웃을 사용하면 원하는 위치에 항목을 배치할 수 있습니다.
HTML 코드의 첫 번째 항목이 그리드의 첫 번째 항목으로 나타날 필요는 없습니다.
1
2
삼
4
5
6
예시
.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; }
미디어 쿼리를 사용하여 특정 화면 크기에 대한 순서를 다시 정렬할 수 있습니다.
예시
@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; }
}