CSS 그리드 아이템
- 이전 페이지 CSS 그리드 컨테이너
- 다음 페이지 CSS 예제
자식 요소(아이템)
그리드 컨테이너는 그리드 아이템을 포함합니다.
기본적으로, 컨테이너는 각 행의 각 열에 하나의 그리드 아이템을 가지고 있지만, 여러 열과/또는 행을 건너어 스타일을 설정할 수 있습니다.
grid-column 속성:
grid-column 속성은 프로젝트를 어느 열에 배치할지 정의합니다.
프로젝트의 시작 위치와 끝 위치를 정의할 수 있습니다。
주의사항：grid-column grid-column-start 및 grid-column-end 속성의 축약형 속성입니다.
프로젝트를 배치하려면, 행 번호(line numbers)를 참조하거나,该项目가 얼마나 많은 열을 지나갈지 정의하는 "span" 키워드를 사용할 수 있습니다.
예제
"item1"를 첫 번째 열에서 시작하여 다섯 번째 열 전에 끝납니다：
.item1 {
grid-column: 1 / 5;
}
예제
"item1"를 첫 번째 열에서 시작하여 3 열을 걸쳐집니다：
.item1 {
grid-column: 1 / span 3;
}
예제
"item2"를 두 번째 열에서 시작하여 3 열을 걸쳐집니다：
.item2 {
grid-column: 2 / span 3;
}
grid-row 속성：
grid-row 속성은 프로젝트가 배치될 행을 정의합니다。
프로젝트의 시작 위치와 끝 위치를 정의할 수 있습니다。
주의사항：grid-row 속성은 grid-row-start과 grid-row-end 속성의 약자 속성입니다。
프로젝트를 배치하려면 행 번호를 참조하거나 "span" 키워드를 사용하여 이 프로젝트가 얼마나 많은 행을 걸쳐야 하는지 정의할 수 있습니다：
예제
"item1"를 row-line 1에서 시작하여 row-line 4에서 끝납니다：
.item1 {
grid-row: 1 / 4;
}
예제
"item1"를 첫 번째 행에서 시작하여 2 행을 걸쳐집니다：
.item1 {
grid-row: 1 / span 2;
}
grid-area 속성
grid-area 속성은 grid-row-start, grid-column-start, grid-row-end, grid-column-end 속성의 약자 속성으로 사용될 수 있습니다。
예제
"item8"를 row-line 1과 column-line 2에서 시작하여 row-line 5와 column line 6에서 끝납니다：
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
예제
"item8"를 row-line 2와 column-line에서 시작하며, 2 행과 3 열을 걸쳐집니다：
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
이름 지정된 그리드 항목
grid-area 속성도 그리드 항목에 이름을 할당하는 데 사용될 수 있습니다。
그리드 컨테이너를 통해 grid-template-areas 이름 지정된 그리드 항목을 참조하는 속성입니다。
예제
item1의 이름은 "myArea"이며, 다섯 개의 그리드 레이아웃의 모든 다섯 개 열을 걸쳐 있습니다：
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
각 행은 쌍따옴표(' ')으로 정의됩니다。
각 행의 열은 쌍따옴표 내에서 정의되며 공백으로 구분됩니다。
주의사항：점은 이름이 없는 그리드 아이템을 나타냅니다。
예제
"myArea"가 다섯 열의 그리드 레이아웃에서 두 열을 건너뛸 수 있도록 합니다（점은 이름이 없는 아이템을 의미합니다）：
.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 코드의 첫 번째 항목은 그리드의 첫 번째 항목으로 표시되지 않아야 합니다。
예제
.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; }
}
- 이전 페이지 CSS 그리드 컨테이너
- 다음 페이지 CSS 예제
