Grid —— CSS网格布局初探

CSS网格布局是一种强大的前端技术，它使得页面布局变得更加容易和灵活。它可以让我们直接在HTML中定义一个网格系统，然后将内容放入各个网格单元中。

为什么使用Grid布局？

传统的布局方式很难满足现代网站的复杂需求，常见的Flexbox布局虽然能够解决部分问题，但它并不适合用作整体布局。相比之下，Grid布局有以下优势：

• 灵活性：Grid布局提供了更多的布局方式和定位方式，可以轻松实现各种复杂的布局效果。
• 可读性：使用Grid布局可以使代码更加清晰明了，易于阅读和维护。
• 响应式设计：Grid布局可以根据不同的设备屏幕大小和设备方向来处理布局，因此非常适合响应式设计。

如何使用Grid布局？

定义网格容器

要使用Grid布局，首先需要在父元素中定义一个网格容器。可以使用display: grid来创建一个新的网格容器。例如：

.container {
  display: grid;
}

划分网格单元

一旦定义了网格容器，就可以开始划分网格单元。可以使用grid-template-columns和grid-template-rows属性来定义网格的列和行。例如：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px;
}

这个例子定义了三列和两行的网格，第一行高度自适应，第二行高度为100像素。

放置网格内容

一旦定义了网格容器和网格单元，就可以放置网格内容了。可以使用grid-column和grid-row属性来指定每个网格单元所占据的列和行。例如：

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px;
}

.item1 {
  grid-column: 1 / 3; /* 占据1到2列 */
  grid-row: 1; /* 占据第1行 */
}

.item2 {
  grid-column: 2 / 4; /* 占据2到3列 */
  grid-row: 1; /* 占据第1行 */
}

.item3 {
  grid-column: 1; /* 占据第1列 */
  grid-row: 2; /* 占据第2行 */
}

.item4 {
  grid-column: 3; /* 占据第3列 */
  grid-row: 2; /* 占据第2行 */
}

这个例子将四个项目放置在一个网格容器中，使用grid-column和grid-row属性分别指定它们所占据的列和行。

示例代码

下面是一个完整的示例代码：

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px;
}

.item1 {
  grid-column: 1 / 3; /* 占据1到2列 */
  grid-row: 1;

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/35365) ，转载请注明来源
本文地址：[https://www.javascriptcn.com/post/35365](https://www.javascriptcn.com/post/35365)