1. 定义网格容器：
.container {
display: grid; /* 将容器设为网格布局 */
grid-template-rows: auto; /* 定义行的大小，auto表示自动调整 */
grid-template-columns: repeat(3, 1fr); /* 定义列的大小，repeat表示重复，1fr表示1份可用空间 */
grid-gap: 10px; /* 网格项之间的间隔 */
}
2. 定义网格项：
.item {
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 网格布局的基础用法，该布局系统还提供了更多强大的特性，如命名网格线、网格模板区域等，以满足更复杂的布局需求。
转载请注明出处：http://www.zyzy.cn/article/detail/12593/CSS3