首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端|Grid实现自适应九宫格布局

前端|Grid实现自适应九宫格布局

作者头像
算法与编程之美
发布2020-04-20 13:08:43
3K0
发布2020-04-20 13:08:43
举报

1 前言

现在无论是做app还是做网站,宫格的布局也是必然存在的,那么如何使用css实现自适应的九宫格布局呢?下面简单来介绍一下css里面的grid实现九宫格布局。

2 相关属性和函数

2.1 fraction单位

CSS 栅格布局带来了一个全新的值:fraction单位,fraction单位通常简写为fr,它允许你根据需要将容器拆分为多个块。下面将每一列和行更改为一个 fraction 单位的值:

.grid {display: grid;//划容器为三个1fr的列grid-template-columns: 1fr 1fr 1fr;//划容器为三个1fr的行 grid-template-rows: 1fr 1fr 1fr;}

结果是栅格布局将会把整个宽度和高度各分成三个 fraction,每列和每行都会各占据一个 fraction 单位。

如果我们将grid-template-columns的值更改为1fr 2fr 1fr,第二列的宽度将会是其它两列的两倍。总宽现在是四个 fraction 单位,第二列占据两个 fraction 单位,其它列各占一个 fraction,此时这些子元素都会随着屏幕宽度的变化而跟着变化了。这样fraction 单位值更改列或行的值将会更加简单。

2.2 repeat函数

repeat()函数是一个强大的指定列和行的方法。让我们使用repeat()函数来更改网格:

grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);

在上面代码中,repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量,第二个参数指定它们的宽度,这就和之前的布局完全一样。

然后是auto-fit。让我们跳过固定数量的列,将3替换为自适应数量:

grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px);

现在,栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px,我们将永远没法获得所需的弹性,因为它们很难填充整个宽度。

为了解决上述问题,我们需要minmax()。我们将 100px 替换为 minmax(100px, 1fr),代码如下:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));grid-template-rows: repeat(2, 100px);

minmax()函数定义的范围大于或等于 min, 小于或等于 max。

因此,现在每列将至少为 100px。但如果有更多的可用空间,栅格布局将简单地将其均分给每列,因为这些列变成了 fraction 单位,而不是 固定的100px。

2.3 gap属性

创建宫格布局时,每一个网格之间肯定会有间隙,可以使用grid-gap来控制其大小,代码如下:

grid-row-gap:2%; //控制行间隙 grid-column-gap:1%; //控制列间隙 grid-gap: 2%;//gap 属性是用来设置网格行与列之间的间隙(gutters),是grid-column-gap 和 grid-row-gap的简写

3 完整代码

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>九宫格布局grid实现</title> <style type="text/css"> .square { position: relative; width: 100%; padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */ } .square-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* 铺满父元素容器,这时候宽高就始终相等了 */ } .grid { display: grid; /*网格布局*/ grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 2%; grid-auto-flow: column; /*通过行或列的方式来依次填充*/ } .grid>div { color: #fff; font-size: 50px; text-align: center; background: lightblue; } </style> </head> <body> <div> <div class="square-inner grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </div> </body></html>

效果图:

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-04-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档