css制作栅格

CSS 栅格布局基础

使用 CSS Grid 可以快速创建灵活的栅格系统。通过 display: grid 定义容器，配合 grid-template-columns 设置列数和宽度。

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

响应式栅格设计

通过媒体查询调整栅格列数，适配不同屏幕尺寸。以下示例在移动端显示 1 列，平板 6 列，桌面 12 列。

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(12, 1fr);
  }
}

栅格项跨度控制

使用 grid-column 控制元素跨越的列数。span 关键字可指定跨越的列数。

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

.grid-item-wide {
  grid-column: span 2;
}

.grid-item-full {
  grid-column: 1 / -1;
}

栅格间距与对齐

gap 属性控制栅格间隙，justify-items 和 align-items 控制内容对齐方式。

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

传统浮动栅格方案

如需兼容旧浏览器，可使用浮动实现栅格。注意清除浮动避免布局问题。

.grid-item {
  float: left;
  width: 8.333%; /* 1/12 */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Flexbox 栅格替代方案

Flexbox 也可实现栅格布局，适合等高等宽项目排列。

.flex-grid {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 0 calc(100%/12 - 20px);
  margin: 10px;
}