css制作栅格

CSS 栅格布局基础

使用 CSS Grid 可以快速创建灵活且响应式的栅格系统。以下是一个基础的 12 列栅格布局实现方式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

栅格列定义

通过 grid-column 属性控制元素跨越的列数。例如定义 4 列的栅格项：

.grid-item {
  grid-column: span 4;
}

响应式栅格设计

结合媒体查询实现不同断点的栅格变化：

@media (max-width: 768px) {
  .grid-item {
    grid-column: span 12;
  }
}

栅格间距控制

使用 gap 属性统一设置行列间距，或分别设置：

.grid-container {
  row-gap: 15px;
  column-gap: 30px;
}

自动填充栅格

实现自动适应容器宽度的弹性栅格：

.grid-container {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

传统浮动栅格方案

兼容旧浏览器的浮动栅格实现方式：

.grid-item {
  float: left;
  width: 23.5%;
  margin-right: 2%;
}
.grid-item:nth-child(4n) {
  margin-right: 0;
}

Flexbox 栅格方案

使用 Flexbox 的替代方案：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 0 0 calc(25% - 20px);
  margin: 10px;
}

栅格命名区域

通过命名区域创建复杂布局：

.grid-container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

嵌套栅格系统

实现多层嵌套的栅格结构：

.sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

栅格对齐控制

精确控制栅格项的对齐方式：

.grid-container {
  align-items: center;
  justify-items: stretch;
}