CSS Grid 是一种灵活强大的布局方式，它允许我们轻松地创建复杂的布局。在本文中，我们将探讨如何使用 CSS Grid 创建三栏布局。
为什么要使用 CSS Grid？
在 CSS Grid 出现之前，我们经常使用浮动或者 Flexbox 来创建布局。但是，这些方法往往需要大量的 CSS 代码，而且有时候显得相对不够灵活、不够强大。
CSS Grid 可以在许多方面改善这些问题。它可以使代码更简洁和易于理解，同时为我们提供更多的布局选项。
首先，让我们了解一下基本概念
CSS Grid 是将页面分成行和列来布局的。行和列分别组成网格，我们可以根据我们的需要调整它们。
在前端开发中，我们通常使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列。
.grid-container {
display: grid;
/*定义 3 行 3 列的网格*/
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}在上面的代码中，我们使用了 1fr，这意味着每个单元格将等分为网格的一部分。
接下来，我们将使用这些基本概念来创建一个简单的三栏布局。
创建三栏布局
在创建三栏布局时，我们需要将页面划分为三个部分：左侧、中间和右侧。
为了实现这个目标，我们可以使用 grid-template-areas 属性来设计出网格的形状。
例如，我们将使用下面的模板：
-- -------------------- ---- -------
--------------- -
-------- -----
---- --- ---- - - -- - ---------
------------------- ---- --- -----
---- --- --
---------------------- ----- --- ------
-----------
--------------------
----- ------ ------
----- ---- ------
----- ------ -------
-我们可以看到，我们将网格分为三行和三列。并且我们将每个部分都放在对应的行和列上，因此我们的 CSS 将如下所示：
-- -------------------- ---- -------
--------------- -
-------- -----
---- --- ---- - - -- - ---------
------------------- ---- --- -----
---- --- --
---------------------- ----- --- ------
-----------
--------------------
----- ------ ------
----- ---- ------
----- ------ -------
-
----- -
---------- ----- --------------
-
------- -
---------- ------- --------------
-
------ -
---------- ------ --------------
-
----- -
---------- ----- --------------
-
------- -
---------- ------- --------------
-我们可以看到，我们为每个部分设置了一个 grid-area 属性，并用网格模板中的对应值将它们放入对应的位置。最终，我们将得到一个简单的三栏布局。
示例代码
下面是完整的 HTML 和 CSS 代码，您可以复制它们并自己测试：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---- ---------------
-------
--------------- -
-------- -----
---- --- ---- - - -- - ---------
------------------- ---- --- -----
---- --- --
---------------------- ----- --- ------
-----------
--------------------
----- ------ ------
----- ---- ------
----- ------ -------
-
----- -
---------- ----- --------------
----------------- ----- ----------
-------- ----- ---------
-
------- -
---------- ------- --------------
----------------- ------- ----------
-------- ----- ---------
-
------ -
---------- ------ --------------
----------------- ----- ----------
-------- ----- ---------
-
----- -
---------- ----- --------------
----------------- ----- ----------
-------- ----- ---------
-
------- -
---------- ------- --------------
----------------- ----- ----------
-------- ----- ---------
-
--------
-------
------
---- -----------------------
---- ----------------- -------------
---- --------------------- -------------
---- ------------------- -------------
---- ----------------- -------------
---- --------------------- -------------
------
-------
-------结论
使用 CSS Grid 创建三栏布局可能看起来有点令人望而却步。但实际上，CSS Grid 是一种非常强大的工具，可以帮助我们轻松地创建复杂的布局。
在本文中，我们了解了如何使用 CSS Grid 为我们的布局创建基本框架。甚至你可以通过这些基础知识，创造出其他很多布局形式。
希望这篇文章对你有所帮助，并能激发你对 CSS Grid 更深入，更广泛的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fa4e2805c1e7f6085c4808