CSS Grid 布局是一种新型的前端布局方式，它可以轻松实现复杂的网页布局效果，而且比传统的 flexbox 和 float 布局更为高效、易于维护。本篇文章将介绍如何使用 CSS Grid 布局来打造一款响应式的商品展示网站，让你深入了解 CSS Grid 布局的强大之处，并掌握如何运用它来实现复杂的网页布局效果。
准备工作
在开始之前，需要先确保你已经掌握了以下技能：
- HTML5 语法基础
- CSS3 基础
- Chrome 开发者工具的基本使用方法
设计思路
我们需要设计一款商品展示网站，它需要具备以下功能：
- 响应式布局，适应各种屏幕大小
- 商品列表随机排列，不会出现空白间隙
- 商品列表分为不同的分类
- 商品列表可以进行筛选，筛选条件包括分类和价格
- 商品列表中的每个商品都有自己的图片和详细说明页面
为了实现以上功能，我们需要对网页布局进行以下设计：
- 使用 header 标签放置网站标题和全局导航栏
- 使用 main 标签作为主要内容区域，从上到下分别是商品筛选区域、商品分类区域、商品列表区域
- 商品筛选区域包含两个下拉框，分别用于筛选商品分类和价格
- 商品分类区域是一个占据整行的网格容器，容器中的每个网格都是一个商品分类，且该分类占满整个网格
- 商品列表区域是一个动态生成的网格容器，每个商品是一个网格，根据筛选条件随机排列
HTML 结构
按照以上设计思路，我们可以编写以下 HTML 结构：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
---------------------
----- ---------------- -----------------
-------
------
--------
---------------
-----
-- ---------------
-- -----------------
-- ----------------
-- -----------------
------
---------
------
---- --------------------
--------------------
--------
------- -------------------------
------- -----------------------------
------- -----------------------------
------- ----------------------------
------- ------------------------------
---------
--------------------
--------
------- -------------------------
------- -----------------------------
------- --------------------------------
------- ---------------------------------
---------
------
---- ----------------------
---- -------------
---- ------------------
-----------
------
---- ------------------
-----------
------
---- -----------------
-----------
------
---- ------------------
------------
------
------
------
---- ---------------------
---- -------- ---
------
-------
-------
-------其中，由于商品列表是动态生成的，我们在 .product-area 内容区域先留个空，待后面的 JavaScript 代码填充。
CSS 样式表
接下来，我们需要使用 CSS 样式表为网页进行布局和样式设计。由于 CSS Grid 布局是关键所在，因此我们着重介绍以下相关的样式代码。
网格容器样式
为了让网格容器具备 CSS Grid 布局的能力，需要为其指定 display: grid 属性：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}其中，grid-template-columns 属性是设置网格列的数量和大小。这里我们采用了 repeat(auto-fill, minmax(250px, 1fr)) 的方式定义列，它可以自适应屏幕大小、生成若干个宽度为 250px 的网格列，并将多出来的空间平均分配给每个列。gap 属性可以设置网格之间的间隙大小。
网格项样式
网格项即网格容器中的一个网格，也就是商品展示页面的每一个商品。我们要为每个网格指定一个特定的样式，让其能够适应不同的商品图片和说明。指定样式如下：
.grid > * {
padding: 10px;
background-color: white;
}这里我们使用了一个通用选择器 .grid > *，表示选择所有直接子元素（即网格项），为它们设置如下的样式：
- padding：网格内边距，确保商品图片和说明不会紧贴到网格的边界上，从而不至于过度压缩或被裁剪
- background-color：网格的背景颜色，确保商品之间有明显的边界，更好地进行视觉区分
除此之外，每个分类的网格项需要加上特定的类名，以便后续进行分类筛选。例如，以下是家具分类的网格项样式：
.furniture {
background-image: url(../images/furniture1.jpg);
background-size: cover;
background-position: center;
font-size: 24px;
color: white;
}这里我们添加了 .furniture 类名，并为其指定了以下样式：
- 背景图片：等比例缩放，覆盖整个网格；
- 字体大小：设置商品名称的字体大小；
- 字体颜色：将商品名称颜色设为白色；
同样，其他分类的网格项样式也可以按照此方式进行定义。
网格响应式布局
在进行响应式布局时，我们需要注意以下几点：
- 在屏幕较小的情况下，将网格列数固定为一个，避免过度挤压导致商品图片和说明被裁剪；
- 在屏幕尺寸变化时自适应调整网格列数和大小；
- 筛选条件选择框需要能够自适应屏幕大小并处于同一行；
- 全局导航栏需要能够收缩成一个菜单，在手机端不占用太多屏幕空间。
为了实现网格响应式布局，可以进行如下设置：
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
----- -
---------------------- ----
-
------------ -
--------------- -------
------------ -----------
-------------- -----
-
------------ - - -
------ -----
-
--- -
-------- -----
--------- ---------
---- -----
----- --
------ --
------- --------- - ------
----------------- ------
-------- --
-
---------- -
-------- ------
-
-这里，我们在媒体查询中针对屏幕宽度小于 767px 的情况进行样式调整，具体设置如下：
- 将商品列表列数调整为 1；
- 筛选条件选择框变为纵向排列；
- 筛选条件选择框宽度调整为 100%；
- 导航栏变为展开/隐藏菜单，同时设置菜单的位置和大小等相关属性。
JavaScript 代码
除了 HTML 和 CSS 之外，我们还需要使用 JavaScript 代码为网站添加一些交互效果。例如，根据用户选择的分类和价格条件动态生成商品列表、在点击导航栏菜单时展开/隐藏菜单，等等。以下是一些基本的 JavaScript 代码示例：
-- -------------------- ---- -------
-- -----------------
----- -------- - -
-
----- -------
------ ----
--------- ------------
------ -----------------
------------ -------- --- ----------- ---- -------- --- ------ ---- --- -------
--
-
----- ---- ----
------ ----
--------- ------------
------ -----------------
------------ --- ---- -- --- ----- --- -- ---- ---- --- ----- --------
--
-- ---
--
-- -----------------
-------- ----------------------------- ------ -
-- ---------
----- ----------- - ----------------------------------------
--------------------- - ---
-- ----------
----- ---------------- - ------------------------- -- -
-- --------- --- ----- -- ---------------- --- --------- -
-- ------ --- ------ -
------ -----
- ---- -- ------ --- ------- -- ------------- -- ---- -
------ -----
- ---- -- ------ --- -------- -- ------------- - --- -- ------------- -- ---- -
------ -----
- ---- -- ------ --- ----------- -- ------------- - ---- -
------ -----
-
-
------ ------
---
-- ------------
----- ---- - --------------------------------
---------------------------------- -- -
----- -------- - ------------------------------
------------------ - -
---- -------------------------------- ----------------------
------------------------
-----------------------------
---- -------------------------------------
-- -----------------
--
-----------------------------------------
---------------------------
---
-
-- -------------
----- -------------- - --------------------------------------- ---------
--------------------------------- -- -
----------------------------------- -- -- -
----- -------- - -------------------------------------------------
----- ----- - ----------------------------------------------
----------------------------- -------
---
---
-- -----------------
----- ---------- - ----------------------------------------
------------------------------------ -- -- -
----- --- - ------------------------------
-------------------------------
---以上 JavaScript 代码中，我们模拟了商品数据，并编写了一个 generateProductList 函数，它可以根据筛选条件生成商品列表并展示在网格容器中。点击选择框时，会调用该函数刷新商品列表。同时，我们还编写了一个 navMenuBtn 的事件监听，它可以在用户点击导航栏菜单按钮时展开/隐藏菜单。
实现效果
最终，我们可以得到一个响应式的、具备分类筛选和价格筛选功能的商品展示网站，其示意图如下所示：
当屏幕大小发生变化时，网页布局和配色都会自适应调整，如下图所示：
总结
本篇文章介绍了如何使用 CSS Grid 布局来搭建一个响应式的商品展示网站，从设计思路到 HTML 结构、CSS 样式表和 JavaScript 代码，详细地介绍了如何实现网格的布局、响应式调整和样式设计，还通过生成商品列表和筛选条件等交互效果来加强网站的展示功能。希望本文对读者理解 CSS Grid 布局的特点和使用方法有所帮助，也能够启发读者在实际开发中运用其优秀的布局能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479830f968c7c53b0582b30