网格制作css

网格制作 CSS

使用 CSS 创建网格布局可以通过多种方式实现，以下是几种常见的方法：

使用 CSS Grid

CSS Grid 是一种强大的布局系统，允许创建复杂的二维网格布局。

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

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

grid-template-columns 定义了列的宽度和数量，repeat(3, 1fr) 表示三列等宽。grid-gap 设置网格项之间的间距。

使用 Flexbox

Flexbox 适合一维布局，但可以通过嵌套实现简单网格。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.item {
  flex: 1 0 calc(33.333% - 10px);
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

flex-wrap: wrap 允许项目换行，flex: 1 0 calc(33.333% - 10px) 确保每行三个项目并考虑间隙。

使用 Bootstrap 网格系统

Bootstrap 提供了预定义的网格类，适合快速开发。

<div class="container">
  <div class="row">
    <div class="col-md-4">Item 1</div>
    <div class="col-md-4">Item 2</div>
    <div class="col-md-4">Item 3</div>
  </div>
</div>

Bootstrap 的网格系统基于 12 列布局，col-md-4 表示中等屏幕上占 4 列（即 33.3% 宽度）。

使用 CSS 多列布局

适用于文本内容的多列排列。

.container {
  column-count: 3;
  column-gap: 20px;
}

column-count 定义列数，column-gap 设置列间距。适合非结构化内容的均匀分布。

响应式网格设计

通过媒体查询调整网格布局以适应不同屏幕尺寸。

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

auto-fill 和 minmax(200px, 1fr) 结合，确保项目最小宽度为 200px 并自动填充可用空间。