css系列-grid栅格布局
栅格介绍
名词解释
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行。
栅格系统与FLEX弹性布局有相似之处理,都是由父容器包含多个项目元素的使用。
兼容性
下面是栅格系统兼容性数据,所以在根据项目使用的场景决定是否使用栅格布局。
声明容器
块级容器
<style>* {padding: 0;margin: 0;}body {padding: 200px;}article {width: 400px;height: 200px;border: solid 5px silver;display: grid;grid-template-rows: 50% 50%;grid-template-columns: 25% 25% 25% 25%;}article div {background: blueviolet;background-clip: content-box;padding: 10px;border: solid 1px #ddd;}
</style><article><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</article>
行级容器
display: inline-grid;
划分行列
栅格有点类似表格,也 行
和 列
。使用 grid-template-columns
规则可划分列数,使用 grid-template-rows
划分行数。
固定宽度
下面是使用固定宽度划分两行三列的的示例,当容器宽度过大时将漏白。
<style>* {padding: 0;margin: 0;}body {padding: 200px;}article {width: 300px;height: 200px;border: solid 5px silver;display: grid;grid-template-rows: 100px 100px;grid-template-columns: 100px 100px 100px;}article div {background: blueviolet;background-clip: content-box;padding: 10px;border: solid 1px #ddd;}</style>
...<article><div></div><div></div><div></div><div></div><div></div><div></div>
</article>
百分比
可以使用使用百分比自动适就容器。
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 25% 25% 25% 25%;
重复设置
使用 repeat
统一设置值,第一个参数为重复数量,第二个参数是重复值
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 50%);
可以设置多个值来定义重复,下面定义了四列,以 100%、20px
重复排列。
display: grid;
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 100px 50px);
自动填充
自动填充是根据容器尺寸,自动设置元素尺寸。
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);
比例划分
使用 fr
单位设置元素在空间中所占的比例,下面按1份-2份
分成两组共四列。
单位组合
width: 300px;
height: 200px;
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 100px 1fr 2fr;
重复定义
width: 300px;
height: 100px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr 2fr);
组合定义
grid-tempalte
是 grid-template-rows
、grid-template-columns
、grid-template-areas
的三个属性的简写。
下面是使用 grid-template
同时声明 grid-template-rows、grid-template-columns
。
grid-template: 100px 1fr / 50px 1fr
下面是使用grid-template
定义 grid-template-areas
,有关grid-template-areas
的使用方法会在下面介绍。
grid-template: "header . ."". main .""footer footer .";
minmax
使用 minmax
方法可以设置取值范围,下列在行高在 最小100px ~ 最大1fr
间取值。
width: 300px;
height: 300px;
display: grid;
grid-template-rows: 100px minmax(100px, 1fr);
grid-template-columns: 100px 1fr;
间距定义
行间距
使用 row-gap
设置行间距。
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
row-gap: 30px;
列间距
使用 column-gap
定义列间距。
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;
组合定义
使用 gap
规则可以一次定义行、列间距,如果间距一样可以只设置一个值。
设置行列间距为20px与10px
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 20px 10px;
统一设置行列间距为20px
gap: 20px;
未完待续
css系列-grid栅格布局相关推荐
- 【CSS】Grid 栅格布局学习笔记
⭐️ 本文首发自 前端修罗场(点击加入),是一个由 资深开发者 独立运行 的专业技术社区,我专注 Web 技术.Web3.区块链.答疑解惑.面试辅导以及职业发展.博主创作的 <前端面试复习笔记& ...
- grid栅格布局详解
grid栅格布局 一.概述 二.grid布局的基本内容 1.术语 2.定义 3.grid-template-columns 属性,grid-template-rows 属性 4.cloumn-gap, ...
- CSS3系列 12 栅格布局
栅格布局 基本介绍 CSS的栅格布局也被称为网格布局(Grid Layout),它是一种新兴的布局方式. 栅格布局是一个二维系统,这意味着它可以同时处理列和行,与弹性布局相似,栅格系统也是由栅格容器包 ...
- CSS的Grid网格布局
Grid网格布局 就是通过设置百分比,或者默认划分的单位个数,来达到宽度自适应的效果 比如,页面控件的宽度,设置自适应随着显示器的宽度的增加而增加,网页永远占满整个屏幕 .searchContentR ...
- Bootstrap(二)——Grid栅格布局
文章目录 一.栅格系统(布局) 1.1 基本结构 示例:col-x 1.2 偏移列 一.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewp ...
- css【详解】grid布局—— 网格布局(栅格布局)
网格布局(Grid)是最强大的 CSS 布局方案 grid布局 和 flex布局的区别 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局. Grid 布 ...
- css里面的网格布局
那么首先来说说一下CSS 中 Grid 网格布局与 Grid 栅格系统的关系 CSS跟Grid布局没有半毛钱关系,Grid只不过是人们在遵循CSS规范的框架内摸索出来的一个最佳实践,你完全可以不鸟栅格 ...
- [译] 你不需要基于 CSS Grid 的栅格布局系统
本文讲的是[译] 你不需要基于 CSS Grid 的栅格布局系统, 原文地址:You do not need a CSS Grid based Grid System 原文作者:Rachel Andr ...
- CSS栅格布局grid详解
栅格布局分为常规栅格和行内栅格,值分别为display:grid:和display:inline-grid:但是大多数栅格布局都是块级的.这里有一个需要注意的是,如果我们给一个标签设置了栅格布局,有的 ...
最新文章
- NVIDIA Jetson Xavier NX上导入tensorflow报错:AttributeError: module ‘wrapt‘ has no attribute ‘ObjectProxy‘
- 项目经理如何参与任务管理
- Get Form type using javascript in CRM 2011
- JZOJ__Day 1:【NOIP普及模拟】JABUKE
- 【华为云踩坑】开启了入方向规则的 tcp/80 端口,仍然无法访问
- 使用Python分析网易云歌曲评论信息,我发现了这些有趣的规律
- python语言的读法-就语法而言,Python 这个语言怎么样?
- WAS7.0安装补丁升级程序无法替换文件 java/docs/autorun.inf解决办法
- kmeans算法详解与spark实战
- 洞烛幽微系列 之 梯度 散度 旋度
- 解决office 2003安装了office 2007兼容包还是打不开office 2007的文件
- 直通串口线与交叉串口线的区分
- 只能上QQ,不能打开网页的解决办法
- 区块链学习系列:对称与非对称加密区别?
- WARNING: too many parse errors
- 点线面的意义_对点线面的认知
- svm之使用SVM(斯坦福machine learning week 7)
- 兔子繁殖问题(C语言)
- 英语老师教计算机,英语教案-小学计算机老师教案?
- 微软春天发布活动将聚焦在Windows 10云版
热门文章
- react native iOS 0.68.2 No visible @interface for ‘RCTBundleURLProvider
- 【嵌入式Linux】第二部分 - 开发实践
- Springboot下使用AspectJ
- 基于PHP+MySQL大学生心理健康管理系统的设计与实现
- 【九】坐标格网添加以及调整
- mysql数字型不为空语句,mysql查询语句select-(null,not null,is null和is not null)
- 数字孪生可视化在石油生产管理中的具体应用
- 杨军昌出席“春风拂槛”唐文化论坛并发表主题演讲
- ipv4地址是ip地址吗?
- 雷霆战机 提升关卡经验魔方掉率攻略