网格布局 grid
时间:2019-09-17
本文章向大家介绍网格布局 grid,主要包括网格布局 grid使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
推荐阅读:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
1. 启动网格布局
div { display: grid; }
启动后,子元素的float
、display: inline-block
、display: table-cell
、vertical-align
和column-*
等设置都将失效
2. 行列高度
div { display: grid; grid-template-columns: 50px 100px 150px; grid-template-rows: 150px 100px 50px; /** 等效于 50px 50px 50px **/ grid-template-columns: repeat(3, 50px); /** 根据父容器,尽可能填充100px的子元素 **/ grid-template-columns: repeat(auto-fill, 100px); /** 提供新单位fr, 表示第一列的宽度为150像素,第二列的宽度是第三列的一半 **/ grid-template-columns: 150px 1fr 2fr; /** minmax 表示第三列宽度范围100px~1fr **/ grid-template-columns: 1fr 1fr minmax(100px, 1fr); /** 表示由浏览器自己决定长度 **/ grid-template-columns: 100px auto 100px; /** 给网格线起名字 **/ grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; }
3. 网格间隔
div { grid-row-gap: 10px; grid-column-gap: 15px; grid-gap: <grid-row-gap> <grid-column-gap>; }
4. 选择区域布局
<div> <div class="item-1">1</div> <div class="item-2">2</div> <div class="item-3">3</div> </div> <style> div { display: grid; grid-template-rows: repeat(3, 50px); grid-template-columns: repeat(3, 50px); grid-template-areas: ". a a" "b a a" ". c c"; grid-gap: 10px; } div div { border: 1px solid #000; } .item-1 { grid-area: a; } .item-2 { grid-area: b; } .item-3 { grid-area: c; } </style>
效果图:
原文地址:https://www.cnblogs.com/amiezhang/p/11531519.html
- [接口测试 - http.client篇] 16 基于http.client之POM实战一下
- 数论部分第一节:素数与素性测试【详解】
- ProtoBuf 序列化工具组件
- C++STL vector简单使用练习1
- 小解Redis 系列
- 小侃 SQL加密和性能
- 接口测试 | 25 requests + pytest测试实例
- 接口测试 | 24 requests + unittest集成你的接口测试
- 接口测试 23 requests基础入门二
- 写让别人能读懂的代码+网页性能管理详解
- CDOJ 1330 柱爷与远古法阵【高斯消元,卡精度】
- Robot Framework | 04 参数化基于Public API的RFS测试
- 接口测试 | 22 requests基础入门
- 分享一个Mvc的多层架构,欢迎大家拍砖斧正
- 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 数组属性和方法
- Python全栈(七)Flask框架之1.Flask简介与URL和视图介绍
- 两个CSS知识点:BFC和选择器权重
- C语言入门系列之9.预处理
- Python爬虫常见异常及解决办法
- 理解nodejs中js和c++的通信原理
- 如何使用FFmpeg将互联网直播点播平台内直播视频流转化为HLS流?
- 记一次nodejs问题排查
- 使用Go语言编译互联网视频直播点播平台EasyDSS出现ld returned 1 exit status错误
- c/c++补完计划(四): 字节对齐和虚继承
- Python 不用selenium 带你高效爬取京东商品评论
- 《闲扯Redis六》Redis五种数据类型之Hash型
- rocketmq学习2
- Python全栈(八)Flask项目实战之1.项目搭建
- 一起来读开源项目的代码-Agar.io为例
- C语言入门系列之11.文件和文件操作