当前位置: 首页 > news >正文

gird 卡片布局

场景一:单元格大小相等

这承载了所有 CSS Grid 中最著名的片段,也是有史以来最伟大的 CSS 技巧之一:

等宽网格响应式卡片实现

.section-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 10px; 
}

grid 等宽卡片响应式布局.gif

解析

grid-template-columns

容器属性,设置表格有多少列。

minmax(最小宽度,最大宽度)

最小宽度往往给个绝对值,比如 220px,保证在小屏幕上卡片的观感体验,内容不会被挤压变形。
最大宽度设置为1fr,它非常类似flx: 1;表示对剩余空间的分配比例。

repeat(arg1, arg2)

重复函数。第一个参数:重复次数。第二个参数:每次的单元格大小。如repeat(2, 20px)

repeat 第一个参数还可以是关键字:auto-fillauto-fit

这两个关键字都可以让单元格大小可伸缩。但要注意:不能给网格子元素宽度设为绝对值。

具体含义:

  • auto-fill:在一行中容纳尽可能多的列,即使它们是空的。
  • auto-fit:将任何列放入空间中。更喜欢扩展列来填充空间,而不是空列。

简单说就是:fill是有足够空间就优先创建列来填充,哪怕是空白列,仅在剩余空间放不下一列时(设置了列最小宽度),才拉伸卡片宽度均分该剩余空间。fit是优先拉伸卡片宽度直接均分剩余空间。

因此两者的区别只有在单行卡片,对剩余空间的处理上才能体现出来。

容器宽度拉的很长,所有卡片摆不满一行:

  • auto-fill:优先用列填充剩余空间

image.png
auto-fill 创建了两个空白列

  • auto-fit:优先拉伸网格填充剩余空间

image.png

gap

gap 为 row-gap 和 column-gap 的简写。

注意:可能会看到 gird-gap 这样的属性,但该 grid- 前缀已弃用(但谁知道呢,可能永远不会从浏览器中删除)。grid-gap 已重命名为 gap。

场景二:部分单元格跨列跨行

B站首页就是这种场景,这其实就是在合并单元格。下面两个网格子项元素的属性可以做到。

合并单元格

  • grid-columngrid-row

分别是 grid-column-start + 和 grid-row-start + grid-column-end grid-row-end 的简写。
第一个参数为合并起始的网格线,第二个参数为合并结束的网格线。
第二个参数可以是网格线序号,也能是 span 2,表示相对起始线后面 2 根网格线为结束。

.item {grid-column: <start-line> / <end-line> | <start-line> / span <value>;grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

实现

.section-content {display: grid;grid-template-columns: repeat(5, 1fr);gap: 10px;
}
.big_card {grid-column: 1 / span 2;grid-row: 1 / span 2;
}

grid 跨行跨列卡片响应式布局.gif

gird 布局指南:A Complete Guide to CSS Grid | CSS-Tricks

http://www.lryc.cn/news/226870.html

相关文章:

  • C#医学检验室(LIS)信息管理系统源码
  • 建行广东江门分行:科技赋能,数据助力纠“四风”
  • 3164:练27.1 叮叮当当 《信息学奥赛一本通编程启蒙(C++版)》
  • 立体库堆垛机放货动作控制程序功能
  • MySQL数据库干货_22——MySQL的用户管理
  • 基于ubuntu 22, jdk 8x64搭建图数据库环境 hugegraph--google镜像chatgpt
  • 4. 深度学习——优化函数
  • docker通过nginx代理tomcat-域名重定向
  • CSS BFC是什么,应用实例
  • 一分钟秒懂人工智能对齐
  • Postman常见报错与解决方法,持续更新~
  • 出电子书了!
  • LeetCode 260. 只出现一次的数字 III 中等
  • 数据结构之红黑树
  • 【chat】4: ubuntu20.04:数据库创建:mysql8 导入5.7表
  • 合并二叉树(Java)
  • C语言 exit函数
  • 基于VPLC711的曲面外观检测XYR运动控制解决方案
  • 【LeetCode刷题-二分查找】--162.寻找峰值
  • vscode调试react 最初的源码
  • Netty网络通信模型
  • .NET快速对接极光消息推送
  • Doris:多源数据目录(Multi-Catalog)
  • 建行驻江门市分行纪检组以政治谈话压责任促发展
  • 如何从存档服务器上完全删除PDM用户
  • 导师对学生学术论文的指导包括哪些方面,请详细展开说明
  • 嵌入式软件开发是个啥职业?
  • 03【远程协作开发、TortoiseGit、IDEA绑定Git插件的使用】
  • Linux:centos7通过yum安装mysql的方法
  • 【算法与数据结构】93、LeetCode复原 IP 地址