1. 定义网格项：
.item {
/* 可以使用 grid-row 和 grid-column 属性指定网格项占据的行和列 */
grid-row: span 2; /* 网格项占据的行数 */
grid-column: 2 / 4; /* 网格项起始列和结束列 */
}
2. 网格元素属性：
- grid-row：指定网格项占据的行。
- grid-column：指定网格项占据的列。
3. 示例：
<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>
在上述示例中，.item 类表示网格容器 .container 的子元素，通过 grid-row 和 grid-column 属性指定了这些网格项占据的行和列。
4. 响应式设计：
你也可以在媒体查询中根据不同的屏幕尺寸调整网格元素的位置和大小。
@media screen and (max-width: 600px) {
.item {
grid-row: auto; /* 重新设置为自动占据行数 */
grid-column: span 3; /* 在小屏幕上占据3列 */
}
}
以上是 CSS 网格元素的基础用法。请注意，网格元素的位置和大小可以在网格容器的定义中进行设置，也可以在网格元素本身的样式中进行设置。
转载请注明出处：http://www.zyzy.cn/article/detail/12595/CSS3