CSS Grid Layout
CSS Grid Layout chia trang thành các nhiều phần và định hình mối quan hệ giữa các phần dựa trên kích thước, vị trí, và lớp (layer) xây dựng từ HTML nguyên thủy.
Giống như tables, grid layout cho phép chúng ta sắp xếp các phần thành cột và hàng. Tuy nhiên, đối với nhiều bố cục, việc sử dụng CSS grid sẽ dễ dàng hơn là table. Ví dụ như các phần tử con trong grid có thể chồng chéo lên nhau thành các layer, giống như việc sử dụng cách định hình vị trí của CSS.
Ví dụ cơ bản
Ví dụ dưới đây sẽ cho bạn thấy một bố cục grid gồm 3 cột có kích thước nhỏ nhất là 100 pixels và kích thước lớn nhất được chỉnh tự động. Các phần được sắp xếp vào grid theo đường thẳng.
HTML
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
CSS
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
Liên quan
Thuộc tính CSS
grid-template-columns
(en-US)grid-template-rows
(en-US)grid-template-areas
(en-US)grid-template
(en-US)grid-auto-columns
(en-US)grid-auto-rows
(en-US)grid-auto-flow
(en-US)grid
(en-US)grid-row-start
(en-US)grid-column-start
(en-US)grid-row-end
(en-US)grid-column-end
(en-US)grid-row
(en-US)grid-column
(en-US)grid-area
(en-US)grid-row-gap
(en-US)grid-column-gap
(en-US)grid-gap
(en-US)
Chức năng CSS
Kiểu dữ liệu CSS
Glossary entries
Chỉ dẫn
- Basic concepts of Grid Layout
- Relationship of Grid Layout to other layout methods
- Layout using line-based placement
- Grid template areas
- Layout using named grid lines
- Auto-placement in CSS Grid Layout
- Box alignment in CSS Grid Layout
- CSS Grid, Logical Values and Writing Modes
- CSS Grid Layout and accessibility
- CSS Grid and progressive enhancement
- Realising common layouts using CSS Grid
Nguồn bên ngoài
Đặc điểm
Specification | Status | Comment |
---|---|---|
CSS Grid Layout | Candidate Recommendation | Initial definition. |