如何在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中文網其他相關文章！