购物车页面是电商网站的重要页面之一，在页面布局方面，往往需要使用到各种布局技术来呈现商品信息和操作按钮。其中，CSS Grid 布局是一个功能强大的前端布局技术，本文将以打造一个购物车页面为例，详细介绍 CSS Grid 布局的使用方法和实例。
CSS Grid 布局简介
CSS Grid 布局是一个二维网格布局系统，可以在容器中创建均匀的网格布局，使得容器内的子元素可以按照指定的行列规则来自动排列。
CSS Grid 布局有一些重要的概念，包括：
- grid container：网格容器，包含整个网格布局的大容器。
- grid item：网格项，网格容器中的子元素。
- grid line：网格线，分为行网格线和列网格线。
- grid cell：网格单元，每个网格单元是由相邻的四个网格线组成的矩形区域。
- grid track：网格轨道，是由相邻的两个网格线围成的区域。
在网格布局中，可以通过设置 grid-template-columns 来定义列，通过设置 grid-template-rows 来定义行。还可以设置 grid-template-areas 来为网格单元指定各自的区域。
打造购物车页面
现在，让我们来实际运用 CSS Grid 布局来打造一个购物车页面。我们将会使用以下 HTML 代码作为基础模板：
-- -------------------- ---- -------
---- ----------------
--------
---
---------
------
-------
-------
----
-------------
-----------
-----------
-----------
-----------
-----------
-----
--------
-------
----
-------------
-----------
-----------
----
------ ----------- ----------
------------------
------------------
-----
-----------
----
-------------------
-------------------
-----
-----
---- ----- ---
--------
--------
--------
----------
---------
---------
-------
------我们可以看到，这个页面包含了一个顶部的标题，一个表格来展示购物车中的商品信息，以及底部的结算区域。接下来，让我们使用 CSS Grid 布局来对这个页面进行布局。
首先，我们需要设置 .wrapper 为网格容器，并定义其行和列。我们可以将页面分为四个区域，分别为顶部标题区域、表格区域、底部结算区域和侧边栏区域（为了展示更多商品信息，我们假设购物车还有一个侧边栏展示热门商品，因此需要一个侧边栏区域），可以采用如下的布局方式：
-- -------------------- ---- -------
-------- -
-------- -----
---------------------- --------- -----
------------------- ---- ------------- ----- -----
--------------------
------- ------ -------
-------- ---- -----
------- ------ --------
-其中，repeat(3, 1fr) 表示将容器分为三列，并且每一列都平分父容器的可用宽度； auto 表示行的高度根据内容自适应，minmax(100px, auto) 表示行的高度最小为 100px，且可以根据内容动态调整高度；grid-template-areas 则指定了各个网格单元所在的区域。
接下来，我们需要在 HTML 中为每个元素指定对应的 grid area。例如，我们将头部标题元素放在了网格单元 header 中，如下所示：
header {
grid-area: header;
}表格放在了网格单元 main 中：
main {
grid-area: main;
}底部结算区域放在了网格单元 footer 中：
footer {
grid-area: footer;
}侧边栏放在了网格单元 sidebar 中：
.sidebar {
grid-area: sidebar;
}最后，我们需要对表格使用 CSS Grid 布局来进一步优化其布局。我们可以为表格的 thead 和 tbody 分别指定行和列，如下所示：
table thead {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
table tbody {
display: grid;
grid-template-columns: repeat(6, 1fr);
}这样，我们就完成了一个简单的购物车页面布局。完整的 HTML 和 CSS 代码如下所示：
-- -------------------- ---- -------
---- ----------------
--------------------
------
-------
-------
----
-------------
-----------
-----------
-----------
-----------
-----------
-----
--------
-------
----
-------------
-----------
-----------
----
------ ----------- ----------
------------------
------------------
-----
-----------
----
-------------------
-------------------
-----
-----
---- ----- ---
--------
--------
--------
----------
---------
---------
-------
---- ----------------
-----------
---- ------ ---
------
------
-------
-------- -
-------- -----
---------------------- --------- -----
------------------- ---- ------------- ----- -----
--------------------
------- ------ -------
-------- ---- -----
------- ------ --------
--------- -----
-------- -----
-
------ -
---------- -------
---------- -----
------------ -----
----------- -------
-------- -----
----------------- --------
-
---- -
---------- -----
------- --- ----- -----
-------------- ----
----------- - --- --- ------- -- -- -----
-
----- -
------ -----
---------------- ---------
-
----- ---
----- -- -
-------- -----
----------- -------
-------------- --- ----- -----
-
----- -- -
----------------- --------
------------ -----
-
----- ------------------ -
----------------- --------
-
----- -
-------- -----
---------------- --------------
----------- -----
-
-------- -
---------- --------
------- --- ----- -----
-------------- ----
----------- - --- --- ------- -- -- -----
-------- -----
----------------- --------
-
-------- - -
---------- -----
------------ -----
-
--------总结
本文介绍了 CSS Grid 布局的基本概念及其在实际项目中的应用示例。通过使用 CSS Grid 布局，我们可以更方便地管理网页中的布局，使得页面设计更加灵活和高效。希望本文能对初学者有所帮助，也欢迎大家在评论区留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503ed4195b1f8cacd0ae15d