grid属性整理
时间:2021-08-20
本文章向大家介绍grid属性整理,主要包括grid属性整理使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
作用于 代码块 说明
container display: grid 网格布局, item项为 块级元素
container display: inline-grid 网格布局, item项为 行内快元素
container grid-template-columns: 100px 100px 100px; item项分三列, 每列 100px
container grid-template-rows: 100px 100px 100px; item项分三行, 每行 100px
css 值 repeat(count , value) 重复某一片段, 可以是多个
css 属性 auto-fill 自动填充, 结合repeat使用
css 属性 fr 等同于 1 个 flex值; <=> flex: 1;可以和px混用
css 属性 minmax(min, max) 限制 css 属性宽高的 最小值和最大值, 等同于 min-width 加上 max-width, 可混用
css 属性 auto 让浏览器自动计算宽度/高度
container grid-template-columns: [a] 100px [b] 100px [c]; 网格线的名称, 两个盒子, 三条竖向的线, 名称分别为 a, b, c
container grid-row-gap: 10px; 列间距10px
container grid-column-gap: 10px; 行间距10px
container grid-gap; 上面两个属性的简写, 写一个默认两个值都是一样的
container grid-template-areas: 'a b c' 定义区域名称, 六个区域, 分别为a ~ f 区域
'd e f'; 不需要的区域可以用 . 表示
container grid-auto-flow: column; 等同于flex改变轴排列方式
container grid-auto-flow: row dense; 某些项目固定位置后, 其他项目的布局方式
item justify-items: start | center |end | stretch; 子项水平方向的排列方式
item align-items: 子项垂直方向的排列方式
item place-items: center center; 上面两个属性的简写形式(先垂直后水平)
container justify-content: start; 设置子容器的对齐方式
container align-content: (值等同于flex的align-item)
container space-content: 上面两个属性的简写形式
container grid-auto-rows 同 grid-template-rows 设置超出container网格外的盒子的宽度
container grid-auto-columns 高度
item grid-column-start 属性, 通过限定网格的边线( 或者网格的名字 )来确定网格的占位( 数字 )
item grid-column-end 属性, 也可以通过span 2 关键字指定跨越几个单元格长度
item grid-row-start 属性,
item grid-row-end 属性
item grid-column gird-row 上面两个属性的简写, 中间用 / 分割, 比较特殊
item grid-area: a; 指定内容放在哪个区间
item justify-self: start end center stretch 指定自身元素的排列顺序 左右方向
item align-self 垂直方向
item place-self 上面两个属性的简写
** container 设置grid 布局之后, 子 item 项的 浮动, 转行内快, 单元格布局, 垂直居中 等属性将失效 **
repeat 用法 eg: grid-template-columns: repeat(3, 100px); 三列, 每列都是100px, 重复三次
auto-fill 用法 eg: grid-template-columns: repeat(auto-fill, 100px); n列, 每列都是100px, 直到一行装不下为止
minmax 用法 eg: grid-template-columns: 100px 200px minmax(100px, 1fr); 三列, 第一列为 100px , 第二列为 100px, 第三列 最小100px, 最大 100%;
auto: grid-template-columns: 100px auto 100px; 三列, 第一和第三列都是 100px, 第二列自适应 (圣杯布局)
本想把生活活成一首诗, 时而优雅 , 时而豪放 , 结果活成了一首歌 , 时而不靠谱 , 时而不着调
原文地址:https://www.cnblogs.com/fmg224/p/15166914.html
- 使用表达式树,让访问者直接执行“角色”对象的方法
- 【更正】“给自定义控件(Web Control)添加事件的几种方法”有一个不太准确的地方。
- 在数据库上实现类似铁路售票锁票功能
- Android代码判断手机是否已root方法学习
- 实体类的枚举属性--原来支持枚举类型这么简单,没有EF5.0也可以
- Android中Context用法详解学习
- 【自然框架】之 “表单控件”与“实体类”
- Android数据存储实现的5大方式
- Android实现图片异步加载操作
- (PDF.NET框架实例讲解)将存储过程映射为实体类
- 【开源】QuickPager ASP.NET2.0分页控件——使用示例、基本应用和查询功能
- 移花接木:当泛型方法遇上抽象类----我的“内存数据库”诞生记
- Android扫描多媒体文件剖析
- Android的进程与线程使用总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 趣味算法:JS实现红绳算法(匹配合适的另一半)
- 2019夏令营笔试编程题
- redis学习(四)
- 使用 Yaml 进行 selenium 的 po 设计
- 几道暑期实习笔试题
- Java自动化测试(selenium 22)
- linux 实现双网卡绑定单个IP——team篇
- Eclipse华丽转身之控件表格工厂
- 面试常考知识点总结——面试必看
- linux 实现双网卡绑定单个IP——bond篇
- Hacking with iOS: SwiftUI Edition - 愿望清单项目(一)
- 重拾Java Web应用的基础体系结构
- 使用SAP C4C自定义BO实现自定义的Number Range
- 限流算法简介及Guava RateLimiter令牌桶限流介绍
- K8S的名称空间创建&&版本的升级、回滚操作