css制作栅格

CSS 栅格布局基础

使用 CSS Grid 可以快速创建灵活的栅格系统。以下是一个基础的 12 列栅格示例：

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

响应式栅格实现

通过媒体查询实现不同屏幕尺寸下的列数变化：

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

栅格项跨度控制

使用 grid-column 属性控制元素跨越的列数：

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

自动填充与适应

auto-fill 和 auto-fit 可以实现动态栅格：

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

传统浮动栅格方案

兼容旧浏览器的浮动栅格方案：

.float-grid {
  width: 100%;
  overflow: hidden;
}
.float-grid-item {
  float: left;
  width: 25%;
  box-sizing: border-box;
}

Flexbox 栅格替代

使用 Flexbox 实现栅格布局：

.flex-grid {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 1 0 25%;
}

栅格间距处理

控制栅格间距的几种方法：

/* 统一间距 */
.grid-gap {
  gap: 15px;
}

/* 单独控制行列间距 */
.grid-gap-specific {
  row-gap: 10px;
  column-gap: 20px;
}

栅格对齐方式

内容在栅格中的对齐方式：

.grid-align {
  align-items: center;
  justify-content: space-between;
}

嵌套栅格系统

创建嵌套的栅格结构：

.nested-grid {
  display: grid;
  grid-template-columns: 30% 70%;
}

浏览器兼容性处理

添加供应商前缀确保兼容性：

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