1. 定义网格容器：
.container {
display: grid;
/* 还可以使用 display: inline-grid; 将容器变成行内网格 */
/* grid-template-rows 和 grid-template-columns 定义网格行和列的大小和结构 */
grid-template-rows: 100px 200px 100px;
grid-template-columns: repeat(3, 1fr);
/* 1fr 表示相等的可用空间，repeat(3, 1fr) 表示重复3次，每次占用1份可用空间 */
grid-gap: 10px; /* 定义网格项之间的间隔 */
}
2. 定义网格项：
.item {
/* 可以使用 grid-row 和 grid-column 属性指定网格项占据的行和列 */
grid-row: span 2; /* 网格项占据的行数 */
grid-column: 2 / 4; /* 网格项起始列和结束列 */
}
3. 网格布局属性：
- grid-template-rows：定义行的大小。
- grid-template-columns：定义列的大小。
- grid-gap：定义网格项之间的间隔。
- grid-row：指定网格项占据的行。
- grid-column：指定网格项占据的列。
4. 示例：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
5. 响应式设计：
你可以使用媒体查询来针对不同的屏幕尺寸定义不同的网格布局，以实现响应式设计。
@media screen and (max-width: 600px) {
.container {
grid-template-columns: repeat(1, 1fr);
}
}
以上是 CSS 网格布局的基础用法。此外，CSS 网格布局还支持更多高级功能，如命名网格线、网格模板区域等，以满足更复杂的布局需求。
转载请注明出处：http://www.zyzy.cn/article/detail/12594/CSS3