如何在CSS中创建网格？

定义网格容器需设置display: grid；2. 使用grid-template-columns和grid-template-rows设定行列大小；3. 采用fr、auto、%等灵活单位实现响应式布局；4. 利用repeat()函数简化重复的列或行定义；5. 结合minmax()与auto-fit/auto-fill实现自适应网格；6. 可选地通过grid-column、grid-row或grid-area精确控制项目位置；完整设置包括容器声明、轨道定义、间隙添加及响应式优化，即可构建高效灵活的二维布局。

Creating a grid in CSS is straightforward using CSS Grid Layout, a powerful two-dimensional layout system. Here’s how to set it up step by step.

1. Define a Grid Container

To create a grid, start by applying display: grid to a container element:

.container {
  display: grid;
}

This turns the element into a grid container, and its direct children become grid items.

2. Set Up Columns and Rows

Use grid-template-columns and grid-template-rows to define the size and number of columns and rows.

Example: A 3-column grid with 2 rows

.container {
  display: grid;
  grid-template-columns: 100px 150px 100px;
  grid-template-rows: 80px 60px;
  gap: 10px; /* Adds space between grid items */
}

This creates:

• 3 columns (100px, 150px, 100px wide)
• 2 rows (80px and 60px tall)
• 10px gap between items

3. Use Flexible Units (like fr, auto, %)

For responsive grids, use flexible units:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Middle column twice as wide */
  grid-template-rows: auto 100px;
  gap: 1rem;
}

• fr = fraction of available space
• auto = size based on content
• % = percentage of container width/height

4. Use repeat() for Simplicity

To avoid repetition, use the repeat() function:

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

You can also combine patterns:

grid-template-columns: repeat(3, 150px 1fr);

5. Make It Responsive

Use minmax() and auto-fit/auto-fill with repeat():

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

• This creates as many columns as fit, each at least 200px wide, expanding equally.
• Great for responsive card layouts.

6. Place Items Explicitly (Optional)

You can position items precisely:

.item1 {
  grid-column: 1 / 3; /* spans from column 1 to 3 */
  grid-row: 1 / 2;    /* spans one row */
}

Or use grid-area:

.item2 {
  grid-area: 2 / 1 / 3 / 4; /* row start / col start / row end / col end */
}

Basic HTML Example

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

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

.item {
  background: lightblue;
  padding: 20px;
  text-align: center;
}

That’s it. CSS Grid is flexible and efficient for both simple and complex layouts. Start with display: grid, define your tracks, add gaps, and go responsive when needed. Basically just a few lines and you’re set.

以上是如何在CSS中创建网格？的详细内容。更多信息请关注PHP中文网其他相关文章！