使用 CSS Grid 实现完美的图文布局

当我们设计一个网页时，如何将文字和图片布局得井井有条，不失简洁美观，是一个非常重要的问题。使用 CSS Grid 可以轻松实现这一目标。本文将深入介绍 CSS Grid 的用法，并提供示例代码和实用技巧。

什么是 CSS Grid？

CSS Grid 是一种二维网格布局方式，可以方便地、灵活地布局网页中的内容。它使得我们可以通过少量的代码实现多样的布局效果。

在 CSS Grid 中，我们使用一个网格容器 (grid container) 和多个网格项目 (grid item) 来定义网页的布局。网格容器定义了一个或多个网格行 (grid row) 和网格列 (grid column)，网格项目则放置在行列交错的网格中。

如何使用 CSS Grid？

首先，我们需要为网格容器定义一个 display: grid 的样式属性。接着，我们可以使用 grid-template-columns 和 grid-template-rows 来定义网格容器的行列结构。例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

上面的代码定义了一个 2 行 3 列的网格容器，其中每个网格的宽度和高度相等，并均分父容器的宽度和高度。repeat() 函数可以快速定义重复的网格单元格。

接着，我们可以通过 grid-column 和 grid-row 属性来指定每个网格项目所占据的行列位置。例如：

.item {
  grid-row: 1 / 2; /* 第 1 行到第 2 行 */
  grid-column: 1 / 2; /* 第 1 列到第 2 列 */
}

上面的代码表示将一个网格项目放置在第 1 行到第 2 行、第 1 列到第 2 列的区域内。/ 符号用来分隔起止位置。

更多 CSS Grid 的用法和实例，请参考 MDN。

如何实现图文布局？

使用 CSS Grid 可以非常方便地实现图文布局。

首先，我们可以定义一个类似于下面的网格结构：

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

上面的代码定义了一个拥有两列等宽的网格容器，每一行的高度自适应。

接着，我们可以将文字和图片分别放在不同的网格项目中：

-- -------------------- ---- -------
---- ------------------
  ---- -------------
    ---------------
    -------------
  ------
  ---- --------------
    ---- --------------- -------
  ------
------

最后，我们可以使用 grid-row 和 grid-column 属性来控制文字和图片在网格中的位置：

.text {
  grid-column: 1 / 2; /* 第 1 列到第 2 列 */
}

.image {
  grid-column: 2 / 3; /* 第 2 列到第 3 列 */
}

tips：当我们需要网格容器自适应高度时，只需要将 grid-template-rows 的属性值设置为 auto 即可。

总结

CSS Grid 是一种强大且易于使用的布局方式，可以帮助我们轻松实现各种布局效果。在实现图文布局时，我们可以利用 CSS Grid 的特性轻松地让文字和图片井然有序地排列。

希望本文能够对你了解 CSS Grid 和实现图文布局有所帮助。如果你想深入学习 CSS Grid，请勇敢地尝试更加复杂的网格结构和效果，不断扩展自己的技能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa66b348841e989468fd25