在前端开发中，布局一直是最基础也是最核心的一部分。在 CSS 中，我们用过很多布局方法，比如使用浮动实现多列布局，使用弹性盒子实现对齐等等。而在 CSS3 中，CSS Grid 布局成为了一种新的布局方式。
CSS Grid 是一种二维的布局模式，旨在使开发者更加便捷的进行页面的布局。它可以处理多个元素，使它们在水平和垂直方向上都能自适应变化。但并不是所有场景和项目都适宜使用 Grid 布局，取舍场景和适用范围是一个很重要的问题。
使用场景
CSS Grid 布局主要适用于以下场景：
- 复杂的布局需求：若是页面布局较为复杂、需要分成几个区域管理，那么使用 CSS Grid 布局非常适合。
- 分区布局：在页面设计中，我们通常划分不同区域对应的不同内容，而 CSS Grid 布局通过 grid-template-columns 和 grid-template-rows 在水平和垂直方向上创建网格，为所有区域的布局提供了很好的支持。
- 网站的响应式设计：Grid 布局使得网站的响应式设计变得更加便捷，能够根据不同的尺寸和屏幕来调整布局。
适用范围
CSS Grid 布局不适用于以下场景：
- 性能敏感的应用：CSS Grid 布局中包含很多 CSS 属性和值，这可能对于性能敏感的应用，如游戏或图像处理，造成性能瓶颈。
- 兼容性问题：虽然 CSS Grid 布局已经被所有主流浏览器全面支持，但 IE 浏览器（目前 IE 11 仍然广泛运用）对 Grid 布局的支持不够完善，会出现一些布局问题。此外，一些老旧的浏览器版本也无法支持 Grid 布局。
- 简单的布局需求：如果你的页面是简单的单列或单行，那么使用 Grid 布局显得过于冗余，不仅增加了代码量，而且会导致你的代码结构变得复杂。
示例代码
下面是一个使用 Grid 布局的示例代码：
-- -------------------- ---- -------
---- ----------------
---- ---------------------------
---- -----------------------------
---- -----------------------------
---- ---------------------------
------
-------
-------- -
-------- -----
---------------------- --- --- ----
------------------- ----- ----- ------
--------------------
------- ------ -------
-------- ------- --------
------- ------ --------
-
------- -
---------- -------
----------------- -----
-
-------- -
---------- --------
----------------- -----
-
-------- -
---------- --------
----------------- -----
-
------- -
---------- -------
----------------- -----
-
--------在这个例子中，我们使用了 grid-template-columns 和 grid-template-rows 来定义了一个网格，然后使用 grid-template-areas 定义了不同区域的位置。通过设置 grid-area 属性来指定元素所在的区域，实现了页面多个区域的布局目的。
结论
在实际开发中，根据不同的项目需求，取舍使用 CSS Grid 布局还是其他布局方式很重要。如果一个项目的页面布局比较复杂，或者需要实现响应式设计，那么使用 Grid 布局是一个不错的选择；如果一个项目比较简单，使用 Grid 布局会导致代码冗余或结构复杂，那么可以考虑使用其他的布局方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f9204fc5c563ced5c3db66