当前位置：首页 > CSS

css制作栅格

2026-01-28 00:37:53CSS

使用Flexbox创建栅格系统

Flexbox是现代CSS布局的强大工具，适合构建灵活的栅格系统。通过设置容器的display: flex属性，子元素会自动排列成行或列。

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

.grid-item {
  flex: 1 0 calc(25% - 20px); /* 四列布局，间距20px */
  margin: 10px;
}

调整calc()中的百分比值可改变列数（如33.33%为三列）。flex-wrap: wrap确保内容换行，margin创建间距。

使用CSS Grid布局

CSS Grid提供了更直观的二维布局方式，通过定义行和列来创建精确的栅格结构。

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 四列等宽 */
  gap: 20px; /* 间距 */
}

.grid-item {
  min-height: 100px;
}

repeat()函数简化重复列定义，fr单位分配剩余空间，gap统一控制行列间距。修改repeat(4, 1fr)中的数字可调整列数。

传统浮动布局

兼容旧浏览器的方案使用float属性，需配合清除浮动避免布局塌陷。

.grid-item {
  float: left;
  width: 23%; /* 考虑margin后调整宽度 */
  margin: 1%;
  box-sizing: border-box;
}

.grid-container::after {
  content: "";
  display: table;
  clear: both;
}

box-sizing: border-box确保边框和内边距不影响总宽度。百分比宽度需根据边距微调（如四列布局用23%宽度+1%边距）。

响应式断点处理

通过媒体查询适配不同屏幕尺寸，通常以移动优先原则编写代码。

.grid-item {
  width: 100%; /* 默认单列 */
}

@media (min-width: 600px) {
  .grid-item {
    width: 50%; /* 中屏两列 */
  }
}

@media (min-width: 900px) {
  .grid-item {
    width: 25%; /* 大屏四列 */
  }
}

断点值（600px、900px等）应根据实际设计需求调整。Flexbox和Grid布局同样适用此原则，只需修改容器属性而非单项宽度。

间距与对齐控制

精细调整栅格间距和对齐方式提升视觉效果。

css制作栅格

/* Flexbox间距方案 */
.grid-container {
  gap: 15px;
  justify-content: space-between; /* 均匀分布 */
}

/* Grid边距方案 */
.grid-item {
  padding: 12px;
  background-clip: content-box; /* 防止padding影响背景 */
}

Flexbox的justify-content控制水平对齐，Grid的gap替代传统margin更精准。内边距(padding)为内容提供呼吸空间。