当前位置：首页 > CSS

css制作栅格

2026-01-08 21:22:14CSS

CSS 栅格布局基础

CSS Grid 布局是一种强大的二维布局系统，允许开发者通过行和列来设计复杂的网页布局。栅格系统由容器（grid container）和项目（grid items）组成。

定义一个栅格容器：

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

这段代码创建了一个三列等宽的栅格，列与列之间有 10px 的间距。

响应式栅格设计

使用媒体查询和 CSS Grid 可以轻松实现响应式布局：

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

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

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

这种设计在小屏幕上显示单列，中等屏幕两列，大屏幕三列。

栅格项目定位

CSS Grid 允许精确控制项目在栅格中的位置：

.item {
  grid-column: 1 / 3; /* 跨越第1到第3列 */
  grid-row: 1; /* 位于第1行 */
}

可以使用简写属性：

.item {
  grid-area: 1 / 1 / 2 / 3; /* 行开始/列开始/行结束/列结束 */
}

自动填充与适应

创建能自动适应容器宽度的栅格：

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

这种布局会在容器宽度允许的情况下尽可能多地放置 200px 宽的列，剩余空间平均分配。

命名栅格区域

定义可读性更强的布局结构：

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

这种方法特别适合整体页面布局设计。

栅格对齐控制

调整栅格项目在单元格内的对齐方式：

.container {
  align-items: center; /* 垂直居中 */
  justify-items: center; /* 水平居中 */
}

.item {
  align-self: start; /* 覆盖容器设置 */
  justify-self: end;
}

这些属性提供了对项目位置的精细控制。

嵌套栅格系统

创建复杂的嵌套布局：

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

.sidebar {
  display: grid;
  grid-template-rows: auto 1fr;
}

嵌套栅格可以构建多层次的布局结构，每个栅格容器都有自己的布局规则。

浏览器兼容性考虑

确保栅格布局在不支持的浏览器中有降级方案：

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

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

使用@supports规则检测浏览器支持情况，提供渐进增强体验。

css制作栅格