前言
当我们在开发一个瀑布流布局的页面时，一般会使用 JavaScript 或者 jQuery 动态计算每个元素的位置，这种方式对性能的要求比较高，而且对页面响应时间有着不利的影响。而 CSS Grid 布局是一种新的布局方式，它能够方便地实现自适应的瀑布流布局，同时不用使用 JavaScript。
在本文中，我们将通过实例来演示如何使用 CSS Grid 布局来实现自适应的瀑布流布局。
CSS Grid 简介
CSS Grid 布局是一种二维网格布局方式，它能够实现复杂的布局，比如瀑布流布局。CSS Grid 布局可以将网格分成列和行，然后将元素放到这些列和行中。
以下是 CSS Grid 布局的主要概念：
- 网格容器：使用
display: grid定义的容器，包含网格的结构。 - 网格行：网格的纵向部分。
- 网格列：网格的横向部分。
- 网格单元格：网格方块中的一个单元格。
- 网格线：网格行或网格列的起点和终点。
实现自适应的瀑布流布局
要实现自适应的瀑布流布局，我们需要先确定每个元素的宽度，并计算出每个网格单元格的宽度。然后我们使用 CSS Grid 布局，将每个元素放到网格中，从而实现自适应的瀑布流布局。
HTML 结构
首先，我们需要有一个包含所有元素的容器。在本例中，容器的类名为 grid-container。每个元素的类名为 grid-item。
-- -------------------- ---- ------- ---- ----------------------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- -------- ---- ---------------------- -------- ---- ---------------------- -------- ------
CSS 样式
首先，我们需要给容器设置 display: grid 和 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))。 repeat(auto-fill, minmax(200px, 1fr)) 表示网格列的宽度自适应，最小宽度为 200px，如果容器宽度足够，会显示更多的列。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}然后，我们需要给每个网格单元格设置 grid-row-end: span 1，这样每个元素都会占据一行，并自动填充到该行的最低位置。
.grid-item {
grid-row-end: span 1;
}最后，我们可以给网格单元格添加一些样式，比如背景色和边框。
.grid-item {
border: 1px solid gray;
background: #eaeaea;
}示例代码
在下面的示例中，让我们来看一下如何使用 CSS Grid 布局实现自适应的瀑布流布局。
-- -------------------- ---- ------- ---- ----------------------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- -------- ---- ---------------------- -------- ---- ---------------------- -------- ------
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----------------- ------------- ------ ---- ----- - ---------- - ------- --- ----- ----- ----------- -------- ------------- ---- -- -------- ----- -
结论
通过使用 CSS Grid 布局，我们可以简单地实现自适应的瀑布流布局，从而提高页面性能和响应速度。让我们一起掌握 CSS Grid 布局，为前端开发提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f151766fbf960197397e6a