css grid 布局

作者：灭世杀发布日期:2026-07-03 浏览:54

/* CSS Grid 布局示例 */

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三列，每列宽度相等 */
  grid-template-rows: auto; /* 行的高度根据内容自动调整 */
  gap: 10px; /* 网格项之间的间距 */
}

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

/* 解释说明：
1. `display: grid;` 将容器定义为网格布局。
2. `grid-template-columns: repeat(3, 1fr);` 创建了三列，每列的宽度相等（1fr 表示一个分数单位）。
3. `grid-template-rows: auto;` 行的高度根据内容自动调整。
4. `gap: 10px;` 设置网格项之间的间距。
5. `.item` 类用于定义每个网格项的样式。*/

上一篇：css 渐变背景

下一篇：div+css