CSS网格布局（Grid）：网格容器、网格项、网格模板

翻滚的胖子
2023-06-05 22:35:55
HTML CSS JavaScript

CSS网格布局（Grid）是CSS3中新增的强大布局方式，可以实现复杂的网页布局效果。在使用网格布局时，需要了解网格容器、网格项和网格模板这三个概念。

1. 网格容器

网格容器是指使用display: grid;属性定义的元素，它的作用是将元素的子元素组织成一个二维的网格布局。可以通过grid-template-columns和grid-template-rows属性来定义网格的列和行。

示例代码：

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

2. 网格项

网格项是指网格容器中的子元素，可以通过grid-column和grid-row属性来定义网格项在网格布局中的位置和大小。

示例代码：

.grid-item {
  background-color: #fff;
  border: 1px solid #333;
  padding: 10px;
}
 
.item-a {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
}
 
.item-b {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
 
.item-c {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

3. 网格模板

网格模板是指通过grid-template-areas属性定义的网格布局模板，可以方便地定义网格项的位置和大小。

示例代码：

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}
 
.item-a {
  grid-area: header;
}
 
.item-b {
  grid-area: sidebar;
}
 
.item-c {
  grid-area: content;
}
 
.item-d {
  grid-area: footer;
}