2025年grid布局（grid布局自适应）

科技前沿 • 2025-06-06 16:05 • 阅读 34

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

网页自适应布局常见的方法有三种。

通过对不同的屏幕宽度进行CSS的调整来实现，不同设备下的网页自适应显示效果。
适合对不同设备显示都需要进行详细且精确的自适应调整，缺点是工作量大。例如：
@media (min-width: 1200){ //>=1200的设备 }
@media (max-width: 990px){ //<=990的设备 }

Bootstrap是目前最出名的自适应布局框架，其原理也就是使用Grid布局，将整个屏幕分为最多12列，通过使用类似.row和.col-xs-4这种预定义的类来实现不同设备下自适应效果。优点是拿来即用。

在这里插入图片描述
讯享网

使用fr单位。 Grid布局提供了一个响应单位fr。 fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。我们将 grid-template-columns:100px 100px 100px;改成grid-template-columns:1fr 1fr 1fr; 结果就是栅格布局将整个屏幕宽度均分为3份，每一列（1个格子）都占一个fr单位。

在这里插入图片描述
我们将屏幕缩小放大都会自动伸缩。

当然你也可以调整其中的占比。比如你希望第二列的格子可以占3份。grid-template-columns:1fr 3fr 1fr;效果如下：

正常的响应式效果是，我们希望在不同容器宽度上，元素可以自动改变所占的宽度，而不是固定列数。我们可以使用repeat（autofit,100px）来实现效果。repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度。我们可以将第一个参数改为auto-fit,这样元素就会根据容器宽度来改变所占列数。

在这里插入图片描述

此时呈现的效果就是，通过使用auto-fit，容器会尽可能多的容纳100px宽的格子。格子足够多的话，就会自动换行。当然这时的效果还并不理想，所有的格子难以填充一个容器宽度，右边容易留白。我们可以使用minmax()函数解决此问题。将代码改成 grid-template-columns:repeat(auto-fit,minmax(100px,1fr))minmax()函数定义的范围大于或等于min，小于或等于max。我们将格子宽度限制为100px，但如果容器有多余的空间就会均分给每列，此时每列都是1fr。效果如下

在这里插入图片描述

我们可以在格子里添加一张图片。改变图片的object-fit为cover。图片就会根据格子的大小来进行覆盖，我们对屏幕进行伸缩时，图片也会跟着格子的改变进行伸缩。

2025年grid布局（grid布局自适应）

相关推荐