CSS Grid 是目前最先进和最强大的 CSS 布局系统之一。它能够让我们轻松实现各种复杂的布局，包括用于响应式设计的自适应和自适应布局、吸附式布局等等。在本文中，我们将深入探讨如何利用 CSS Grid 打造吸附式布局。
什么是吸附式布局？
吸附式布局是一种可以让页面布局自动调整，吸附窗口边缘或其他元素的布局方式。比如，当我们将窗口的大小调整为较小的尺寸时，元素会自动向页面的中心进行吸附，当我们将页面的尺寸调整为较大的尺寸时，元素会自动占满整个页面。这种布局方式可以有效的提高页面的可读性和用户体验。
如何实现吸附式布局？
要想实现吸附式布局，我们需要引入一些 CSS Grid 的相关属性：
grid-template-columns是用于定义网格列的属性，这个属性的值可以是一个或多个长度、百分比或关键字。grid-template-rows是用于定义网格行的属性，这个属性的值可以是一个或多个长度、百分比或关键字。grid-column-gap是用于定义列之间的空隙的属性。grid-row-gap是用于定义行之间的空隙的属性。grid-auto-columns和grid-auto-rows是用于定义自动布局的属性，这些属性的值可以是一个或多个长度、百分比或关键字。grid-auto-flow是用于定义自动布局的方向的属性。
以及一些 JavaScript 的事件监听：
window.addEventListener("resize", function(){ /* resize 事件逻辑 */ })用于监听窗口大小变化的事件。el.addEventListener("transitionend", function(){ /* transitionend 事件逻辑 */ })用于监听 CSS 过渡动画结束的事件。
实现步骤
以下是实现吸附式布局的详细步骤：
- 首先，在 HTML 文件中添加一个包含多个块元素的容器元素。每个块元素的
class属性指定为需要吸附的目标元素，如下所示：
<div class="container"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div>
- 在 CSS 文件中，定义容器元素的样式，并使用
display: grid属性定义容器为 CSS Grid 布局。指定grid-template-columns和grid-template-rows属性来定义网格结构和单元格大小，如下所示：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---------------- ----- ------------- ----- ------ ----- ------- ----- --------- --------- -
其中，repeat(3, 1fr) 表示网格有三列，每列的宽度均为 1/3。同理，repeat(3, 1fr) 表示网格有三行，每行的高度均为 1/3。
- 接下来，为目标元素（
class属性为item）指定如下样式：
-- -------------------- ---- ------- ---------- ----- - ----------------- ----- ----------- - --- --- ------- -- -- ----- -------------------- ----- -------------------- ---------- --------------------------- ------------ -------------- ---- -------- -- --------- ------- --------- --------- -
这里指定了目标元素的一些基本样式，包括背景色、阴影、过渡效果等等。
- 接着，在 JavaScript 文件中，使用
window.addEventListener监听窗口大小变化的事件：
window.addEventListener('resize', function () {
// 窗口大小变化，重新计算布局
layoutGrid();
});当窗口大小发生变化时，会触发 layoutGrid 函数重新计算布局。
- 定义
layoutGrid函数，该函数实现了容器元素的吸附式布局逻辑：
-- -------------------- ---- -------
-------- ------------ -
----- --------- - -------------------------------------
------------------------------------------- -- -
----- ------ - ---------------------------
----- --------------- - ----------------------------------
--- ----- - ------------------------
--- ----- - ------------------------
-- ------------
----- ---- - ----------- - ---------------------
----- --- - ---------- - --------------------
----- ----- - --------------------- - -------------
----- ------ - ---------------------- - --------------
-- ------------
-- ----- - ------ ----- - -----
-- ------ - ------ ----- - -------
-- ---- - ------ ----- - ----
-- ------- - ------ ----- - --------
-- ---------
------------------ - ----------------------- ------------------------
---
-在 layoutGrid 函数中，我们遍历了所有目标元素，并计算了它们到容器边缘的距离。然后，通过比较这些距离的大小，计算出每个元素应该吸附到的位置，并将元素移动到目标位置。
- 最后，在 CSS 文件中，为目标元素定义过渡动画的样式：
.container .item {
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease-in-out;
}这样，当元素位置发生变化时，就会显示出过渡效果，提高用户体验。
至此，我们就实现了吸附式布局的功能。下面是完整的 HTML、CSS 和 JavaScript 代码示例：
-- -------------------- ---- -------
--------- -----
------
------
-------
---- -
------- --
-------- --
------- ------
-
---------- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
---------------- -----
------------- -----
------ -----
------- -----
--------- ---------
-
---------- ----- -
----------------- -----
----------- - --- --- ------- -- -- -----
-------------------- -----
-------------------- ----------
--------------------------- ------------
-------------- ----
-------- --
--------- -------
--------- ---------
-
--------
-------
------
---- ------------------
---- ----------- -------------
---- ----------- -------------
---- ----------- -------------
------
--------
--------------------------------- -------- -- -
-- -------------
-------------
---
-------- ------------ -
----- --------- - -------------------------------------
------------------------------------------- -- -
----- ------ - ---------------------------
----- --------------- - ----------------------------------
--- ----- - ------------------------
--- ----- - ------------------------
-- ------------
----- ---- - ----------- - ---------------------
----- --- - ---------- - --------------------
----- ----- - --------------------- - -------------
----- ------ - ---------------------- - --------------
-- ------------
-- ----- - ------ ----- - -----
-- ------ - ------ ----- - -------
-- ---- - ------ ----- - ----
-- ------- - ------ ----- - --------
-- ---------
------------------ - ----------------------- ------------------------
---
-
---------
-------
-------总结
本文详细地介绍了如何利用 CSS Grid 打造吸附式布局，包括实现步骤和代码示例。吸附式布局不仅提高了页面的可读性和用户体验，而且在响应式设计中也具有重要的应用价值。如果您正在开发一个需要响应式和自适应布局的网站或应用程序，那么 CSS Grid 就是您的首选之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649325c548841e98940ec261