수색…
소개
그리드 레이아웃은 웹 페이지 컨텐츠를 쉽게 행과 열로 나눌 수있는 새롭고 강력한 CSS 레이아웃 시스템입니다.
비고
CSS 그리드 레이아웃 모듈 레벨 1 은 2016 년 9 월 9 일부터 W3C 후보 권고안입니다. 테스트 단계 ( https://www.w3.org/Style/CSS/current-work) 에있는 것으로 간주됩니다.
2017 년 7 월 3 일부터 Microsoft의 Internet Explorer 10 및 11 및 Edge 브라우저는 공급 업체 접두사를 사용하는 이전 버전의 사양 만 지원합니다.
기본 예제
| 재산 | 가능한 값 |
|---|---|
| 디스플레이 | 그리드 / 인라인 그리드 |
CSS Grid는 표시 속성으로 정의됩니다. 부모 요소와 그 직접적인 자식에만 적용됩니다.
다음 마크 업을 고려하십시오.
<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>
위의 마크 업 구조를 그리드로 정의하는 가장 쉬운 방법은 단순히 display 속성을 grid 설정하는 것입니다.
.container {
display: grid;
}
그러나 이렇게하면 항상 모든 하위 요소가 서로 겹쳐집니다. 이는 아이들이 현재 그리드 내에 자신을 배치하는 방법을 알지 못하기 때문입니다. 그러나 우리는 그들에게 명백하게 말할 수 있습니다.
먼저 그리드 요소 .container 얼마나 많은 행과 열이 구조를 구성하는지 알려주고 grid-columns 및 grid-rows 속성을 사용하여이 작업을 수행 할 수 있습니다 (복수형 참조).
.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}
그러나 그것은 우리가 각 어린이 요소를 주문할 필요가 있기 때문에 여전히 도움이되지 않습니다. 우리는 grid-row 와 grid-column 값을 지정함으로써 grid-row 에서의 위치를 알릴 수 있습니다 :
.container .item1 {
grid-column: 1;
grid-row: 1;
}
.container .item2 {
grid-column: 2;
grid-row: 1;
}
.container .item3 {
grid-column: 1;
grid-row: 2;
}
.container .item4 {
grid-column: 2;
grid-row: 2;
}
각 항목에 열과 행 값을 제공하여 컨테이너 내의 항목 순서를 식별합니다.
JSFiddle 에서 작업 예제를 봅니다 . IE10, IE11 또는 Edge에서 이것을보아야합니다. 현재는 그리드 레이아웃을 지원하는 유일한 브라우저 (공급 업체 접두어 -ms- 와 함께) 또는 크롬, 오페라, Firefox에서 차례대로 사용 가능하도록 설정할 수 있습니다 . 그들과 함께 테스트 할 수 있습니다.
