在前端开发中，常常需要实现图文混排的效果，即在页面上同时展示文字和图片，同时让它们排列合理，美观。而传统的方法往往需要通过设置多个 div 等元素，并使用 float 等样式来实现，代码复杂、维护难度大，不易修改。而 CSS Grid 提供了一种更为简单的实现方法。
什么是 CSS Grid？
CSS Grid 是一种基于网格的布局系统，可以让开发者以更加直观和灵活的方式控制页面布局。使用 Grid，可以将页面分割成若干行和列，并将内容放置在格子中，从而将内容组织成栅格形式，优化页面布局。
图文混排可以通过 CSS Grid 实现
CSS Grid 最有用的地方就是在快速、简单地实现网格布局，这种布局形式非常适合图文混排，特别是当你遇到上下文环境不同但需要保持一致布局结构的需求时，CSS Grid 可以更好地完成这项任务。
如何使用 CSS Grid 实现图文混排？
使用 CSS Grid 实现图文混排只需要遵循以下步骤：
1. 创建网格容器
我们可以使用 display: grid 属性来创建一个网格容器，这样就可以将内容排列在相应的栅格中。
.grid-container {
display: grid;
}2. 定义列宽和行高
我们需要定义每列的宽度和每行的高度，可以使用 grid-template-columns 和 grid-template-rows 属性实现。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}3. 放置内容
使用 grid-column 和 grid-row 属性将内容放置在相应的栅格中。
-- -------------------- ---- ------- --------- - ------------ - - -- --------- - - -- - --------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- -
注意，使用 grid-column 和 grid-row 属性时，需要给出内容在网格中的起始位置和结束位置，例如上面的示例中，表示 content1 需要放置在第 1 到第 2 列，第 1 到第 2 行。
4. 完成布局
最后，我们只需要用这个网格容器包装我们需要展示的元素，就可以完成图文混排的布局了。
-- -------------------- ---- -------
---- -----------------------
---- -----------------
-------- ----- ----- --- ----- ----------- ---------- ---------
------
---- -----------------
-------- ---- --- -- -- ------ --------------
------
---- ---------------
---- ----------------------------------------- -------
------
---- ---------------
---- ----------------------------------------- -------
------
------示例代码
完整示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---- --------------
-------
--------------- -
-------- -----
---------------------- --- ----
------------------- ---- -----
--------- -----
-
--------- -
------------ - - --
--------- - - --
-
--------- -
------------ - - --
--------- - - --
-
------- -
------------ - - --
--------- - - --
-
------- -
------------ - - --
--------- - - --
-
--------
-------
------
---- -----------------------
---- -----------------
-------- ----- ----- --- ----- ----------- ---------- ----- ----- ------ ----- ------------ -- --------- ---- --------- --- ---- ------------ ----------- --------- ---- --- -------- ----- --------- --- ------ --- ------ --- ------ --------- -------- --- -- ----- ----- -------- ----- ---- ---- -------------
------
---- -----------------
-------- ---- --- -- -- ------ ---------- ---- ------- ------ ------ ------ ------ ----- ------- ----- ---- -------- ----- ---- -------- --------- --------- -------- ------- ----- ---- --------- ------ ----- ------- ------ ------- -- ------ ----------
------
---- ---------------
---- ----------------------------------------- -------
------
---- ---------------
---- ----------------------------------------- -------
------
------
-------
-------总结
CSS Grid 提供了一种简单、灵活的方式来实现图文混排，相比传统方法，使用 CSS Grid 可以减少代码量、提高代码可维护性和可读性。如果你还没有使用 CSS Grid 来布局你的网页，这是时候尝试一下了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654b4e5b7d4982a6eb533a2e