什么是 CSS Grid 布局？
Grid是一种新的Web布局技术。它是通过行和列的方式来创建布局，不需要使用外部的库或框架，如Bootstrap。使用CSS Grid，您可以轻松地为Web页面和应用程序创建更复杂的布局。
为什么使用 CSS Grid 布局？
CSS Grid 布局可以用来创建各种各样的网页布局。在使用CSS Grid 布局之前，我们通常会依赖外部框架或库来实现想要的网页布局。但是，这些库和框架很容易出现样式的繁琐、命名空间污染等问题，因此CSS Grid 布局成为了更加可靠、可预测和可维护的一种解决方案。
CSS Grid 布局的基本概念
在开始使用 CSS Grid 布局之前，需要理解一些基本概念：
grid container（网格容器）：它是一些列带有 display: grid 属性的元素的容器。这些元素是 grid item（网格子元素）的父元素。
grid item（网格子元素）：位于 grid container 内的元素。
grid line（网格线）：grid container 内每条虚拟线。
grid track（网格轨道）：由一系列相邻的网格线围成的空间。
grid cell（网格单元）：grid container 内两条相邻的网格线之间。
CSS Grid 布局的示例代码
下面是一个简单的CSS Grid布局，以此介绍CSS Grid的核心概念：
-- -------------------- ---- -------
---- -----------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
------
-------
--------------- -
-------- -----
---------------------- --- --- ----
------------------- ----- ----- ------
--------- -----
-
---------- -
----------------- -----
-
--------这段代码中，我们创建了一个网格容器（grid container），包含6个网格子元素（grid item）。我们从 grid-template-columns 和 grid-template-rows 声明了网格轨道，使得我们的元素排列成为 3 列，每列高度为 100 像素。此外，我们还为网格容器设置了间距（grid-gap），它是网格容器内相邻网格周围的间距。
在实际项目中使用 CSS Grid 布局
以下是在项目中通过 Grid 进行布局的一些提示：
设计好布局再动手：在使用 Grid 布局前，先把设计想法设计出来并看看它是如何转换为网格。这有助于优化您准备使用的语法，也有助于将设计目标转化为代码。
对内容和排版进行评估：评估您的页面和内容。您的网格是只有文本和图像的简单应用还是为功能强大的应用程序打造的完整框架？
针对不同大小的设备进行设计：通过 Media Query 和 fr 单位，使您的网格适应各种大小设备。
使用自动布局：对于那些大小不确定的元素，使用自动布局可能会更加便利。
结论
CSS Grid 布局是一种非常强大的布局技术，可以通过使用行和列的方式来创建复杂的布局。使用 CSS Grid 布局可以减少网页框架等第三方库的使用，提高网页的性能，同时也能使得网页布局的可维护性更高。我们鼓励前端开发者在实际项目中尝试使用 CSS Grid 布局，因为它可以极大地提高开发效率和代码维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677204886d66e0f9aad3b0ed