系统数据库与建设网站,wordpress 配置证书,中卫网络工程招聘,陕西做网站的公司在哪如何使用CSS构建一个瀑布流布局
瀑布流布局是一种常见的网页布局方式#xff0c;其中元素以不同的大小排列#xff0c;且行与列之间没有不均匀的间隙。在瀑布流布局中#xff0c;即使某一行或列中的元素较短#xff0c;下一个元素也会占据空间。
如何实现瀑布流布局
实现…如何使用CSS构建一个瀑布流布局
瀑布流布局是一种常见的网页布局方式其中元素以不同的大小排列且行与列之间没有不均匀的间隙。在瀑布流布局中即使某一行或列中的元素较短下一个元素也会占据空间。
如何实现瀑布流布局
实现这一目标的方法有很多但最好的方法就是使用grid-template-columns和repeat()函数。
grid-template-columns 属性
除了明确的列大小之外CSS Grid最有价值、最实用的功能之一就是重复列直到列满为止然后自动将项目放置其中。尤其是我们可以在网格中指定所需的列数然后让浏览器控制这些列的响应性这样就能在视口尺寸较小的情况下显示较少的列而在屏幕宽度增加时显示较多的列。
这可以通过使用 repeat() 函数和auto-placement属性来实现。简而言之repeat()函数允许我们根据需要重复列。例如如果我们要创建一个 12 列的网格我们可以写如下代码
.grid {display: grid;/* 定义网格列数 */grid-template-columns: repeat(12, 1fr);
}我们使用1fr告诉浏览器将可用空间平均分配给每一列使每一列获得相等的份额。也就是说无论网格有多大本例中的网格总是有 12 列。然而这还不够好因为在较小的视口中内容会被挤压得太厉害。
因此我们需要指定列的最小宽度确保它们不会太窄。为此我们可以使用minmax()函数。
grid-template-columns: repeat(12, minmax(300px, 1fr));但由于CSS Grid的特性该行会溢出。我们明确指示浏览器每行重复列 12 次因此即使视口宽度太小无法按照新的最小宽度要求全部容纳这些列超出视窗范围的列也不会自动换行。
要实现换行我们可以使用auto-fit或auto-fill属性。
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));通过使用这些关键字我们可以指示浏览器为我们处理元素换行和列的大小使原本会溢出的元素自动换行。
这就是Grid现在的样子
但这不是砌体布局。那么如何实现呢让我们来看看。
grid-column 和 grid-row属性
grid-column和grid-row属性指定了grid item在网格布局中的大小和位置。因此我们可以指定网格中单个grid item的宽度或高度。为此我们可以使用span特性。
要增加第一个grid item的宽度我们可以这样写
.grid-item:nth-child(1) {grid-column: span 2;grid-row: span 1;
}因此第一个网格单元格将横跨两列展示结果如下
同理如果要增加第二个grid item的高度我们可以这样写
.grid-item:nth-child(2) {grid-column: span 1;grid-row: span 2;
}因此第二个grid item将横跨两行展示效果如下
同样如果我们以所需的方式处理每个grid item就会得到以下结果
但是如果grid item的数量过多就无法为每个grid item指定精确的高度和宽度。因此我们可以动态分配这些值 .grid-item: nth-child(7n1) {grid-column: span 2;grid-row: span 1;
}.grid-item: nth-child(7n2) {grid-column: span 1;grid-row: span 2;
}.grid-item: nth-child(7n4) {grid-column: span 1;grid-row: span 2;
}.grid-item: nth-child(7n5) {grid-column: span 3;grid-row: span 1;
}最终效果如下
