css grid generator

作者：步崖发布日期:2025-10-02 浏览:73

/* CSS Grid Generator 示例代码 */

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

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

/* 解释说明：
   - .container 是网格容器，使用 display: grid 声明为网格布局。
   - grid-template-columns 定义了三列，每列宽度相等（1fr 表示分数单位）。
   - grid-template-rows 定义行高为自动。
   - gap 设置网格项之间的间距。
   - .item 是网格项，设置了背景颜色、内边距和文本居中对齐。
*/

上一篇：css多余文字显示省略号

下一篇：什么是css样式