CSS Grid 是前端开发中一种新的布局模式，在比较短的时间内得到了广泛的应用。它可以帮助我们轻松地实现各种复杂布局，如网格、定位和居中等。
本文将分享一些实践中常用的 CSS Grid 代码片段，希望能够帮助读者更好地理解和运用 CSS Grid 技术。
代码片段①：基本网格布局
首先，我们介绍的是最基本的网格布局。通过 CSS Grid，我们可以定义网格的行和列，并将其组合成一个网格。我们可以通过 grid-template-columns 和 grid-template-rows 属性来定义网格的列数和行数。
HTML 结构：
<div class="grid-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
CSS 样式：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----- ----- ------ ------------------- ----- ------ ---- ----- - ----- - ----------------- ----- -------- ----- ---------- ----- ----------- ------- -
通过上述代码片段，我们定义了一个网格容器，包含了 2 行、3 列的网格，每个网格之间的间距为 10px。
代码片段②：网格自适应布局
为了让网格布局更加灵活，我们可以根据不同的设备宽度来自适应网格布局。
HTML 结构：
<div class="grid-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
CSS 样式：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----------------- ------------- ------ ---- ----- - ----- - ----------------- ----- -------- ----- ---------- ----- ----------- ------- -
通过 repeat(auto-fill, minmax(100px, 1fr)) 属性，我们可以让网格自适应屏幕宽度，当浏览器宽度增加时，网格会自动增加列数；当浏览器宽度减小时，网格会自动减少列数。而 minmax(100px, 1fr) 属性则表示网格的最小值为 100px，最大值为 1 个网格宽度。
代码片段③：带有标头和注脚的网格布局
除了基本的网格布局外，我们还可以通过 CSS Grid 实现带有标头和注脚的复杂布局。这种布局通常会在一些需要分页的情况下使用。
HTML 结构：
<div class="grid-container"> <div class="header">Header</div> <div class="content">Content</div> <div class="footer">Footer</div> </div>
CSS 样式：
-- -------------------- ---- ------- --------------- - -------- ----- ------------------- ----- --- ------ ------- ------ - -------- ------- - ----------------- ----- ----------- ------- -------- ----- ---------- ----- - -------- - ----------------- ----- -------- ----- ---------- ----- -
通过 grid-template-rows: 100px 1fr 100px; 属性，我们可以让网格的第一行和第三行定义为标头和注脚，而网格的第二行则为内容。其余的 CSS 样式我们可以参考上文的代码块。
代码片段④：响应式菜单栏布局
最后，我们分享的是一种常见的响应式菜单栏布局。通过 CSS Grid，我们可以在不同的屏幕尺寸下，自适应地展示菜单和主体内容。
HTML 结构：
-- -------------------- ---- -------
---- -----------------------
---- -------------
----
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
------
---- -----------------------------
------CSS 样式：
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- --- ----
------- ------
-
----- -
----------------- -----
-------- -----
---------- -----
-
-- -
----------- -----
------- --
-------- --
-
-- -
-------------- -----
-
- -
---------------- -----
-
------ ----------- ------ -
--------------- -
-------- ------
------- -----
-
----- -
------- -----
-
-------- -
----------- -----
-
-通过 grid-template-columns: 1fr 3fr; 属性，我们定义了菜单栏和内容区域的比例。而通过 @media (max-width: 600px) 属性，我们可以在屏幕宽度小于 600px 时，将菜单栏的布局改为垂直排列，并将内容区域向下移动。
结论
本文分享了四个常用的 CSS Grid 布局代码片段。我们通过这些代码片段，可以更好地理解和运用 CSS Grid 技术，轻松实现各种复杂布局。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fce1b644713626017438f6