css grid布局

作者：洃铯哖輪发布日期:2026-07-01 浏览:89

/* CSS Grid 布局示例 */

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建一个三列的网格，每列宽度相等 */
  grid-gap: 10px; /* 设置网格项之间的间距 */
  padding: 10px; /* 设置容器的内边距 */
}

.item {
  background-color: lightblue; /* 设置背景颜色 */
  padding: 20px; /* 设置内边距 */
  text-align: center; /* 文本居中 */
}

/* 解释说明：
- .container 类用于定义一个网格容器，并使用 grid-template-columns 属性创建一个三列的网格布局。
- 每个网格项（.item）会自动放置在网格的下一个可用位置。
- grid-gap 属性用于设置网格项之间的间距。
- padding 属性用于设置容器的内边距，确保内容不会紧贴边缘。
*/

上一篇：css颜色代码大全

下一篇：css padding