CSS 网格布局(Grid Layout)是 CSS3 中的一个强大布局系统,它允许开发者以更简单、更灵活的方式创建复杂的页面布局。

基本概念

  • 容器(Container):网格布局中的容器指的是使用 display: griddisplay: inline-grid 属性定义的元素。
  • 项目(Item):容器中的所有子元素都被称为项目。

布局属性

  • grid-template-columnsgrid-template-rows:定义网格的列和行。
  • grid-columngrid-row:定义项目的位置。
  • grid-gap:定义网格的间距。

实例

以下是一个简单的网格布局实例:

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

.item1 { grid-column: 1; }
.item2 { grid-column: 2; }
.item3 { grid-column: 3; }
.item4 { grid-column: 1 / 3; }
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

网格布局示例

扩展阅读

更多关于 CSS 网格布局的教程,请访问本站 CSS 网格布局教程

# CSS Grid Layout Tutorial

CSS Grid Layout is a powerful layout system in CSS3 that allows developers to create complex page layouts in a simpler and more flexible way.

## Basic Concepts

- **Container**: The container refers to the element that is defined with the `display: grid` or `display: inline-grid` property.
- **Item**: All child elements of the container are called items.

## Layout Properties

- `grid-template-columns` and `grid-template-rows`: Define the columns and rows of the grid.
- `grid-column` and `grid-row`: Define the position of the item.
- `grid-gap`: Define the spacing of the grid.

## Example

Here is a simple grid layout example:

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.item1 { grid-column: 1; }
.item2 { grid-column: 2; }
.item3 { grid-column: 3; }
.item4 { grid-column: 1 / 3; }
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

Grid Layout Example

Further Reading

For more tutorials on CSS Grid Layout, please visit our CSS Grid Layout tutorial.