CSS 网格布局（CSS Grid Layout）是一种用于网页布局的强大且灵活的CSS模块。它允许你以网格形式划分页面，并使得在这些网格上布置元素变得非常简单。以下是一个简单的例子：
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 定义三列，每列宽度为100px */
  grid-template-rows: 50px 50px; /* 定义两行，每行高度为50px */
  gap: 10px; /* 定义行列之间的间距 */
}

.item {
  grid-column: span 2; /* 使元素跨越两列 */
  grid-row: span 1; /* 使元素跨越一行 */
}

在这个例子中，.container是一个使用网格布局的容器，包含了两行和三列的网格。.item是容器中的一个子元素，通过 grid-column 和 grid-row 属性指定它占据的列和行。

使用网格布局的好处之一是它提供了对网格中元素位置和大小的直观控制，使得响应式布局更加容易。你可以动态调整网格的列和行，而不必依赖传统的盒子模型。

这只是一个简单的入门例子，CSS Grid Layout 提供了许多更复杂和强大的功能，如自适应网格、命名网格线等。如果你对此感兴趣，可以深入学习网格布局的更多特性。


转载请注明出处：http://www.zyzy.cn/article/detail/12578/CSS