css3中网格布局(grid)的基本介绍
来源:互联网 发布:巩义共赢网络是什么 编辑:程序博客网 时间:2024/04/26 15:31
一、css3
中网格布局
类似传统的
web
开发中的表格,只是没表格那么复杂
1、定义一个容器使用网格布局
.grid{ display:grid;}
2、定义占用几行与几列(需要定义在父元素容器中)
1、平均分几列
.grid{ grid-template-columns: repeat(3, 1fr);/*表示平均分3列*/}
2、根据指定的宽度分列
.grid{ /*表示分4列,第一列150px,第二列100px,第三列50px,第四列占剩余的空间*/ grid-template-columns: 150px 100px 50px 1fr;}
3、行的使用跟列的使用一样的
.grid{ grid-template-rows: repeat(10,1fr);}
3、定义单个的容器占用行的区域
.item:nth-child(1){ /*grid-column表示占用列的空间:1从哪里开始,到4前面*/ grid-column: 1/4;}
4、同理
grid-row
表示占用行的空间区域5、
grid-column-start
指定哪列从哪里开始- 6、
grid-gap: 1px;
表示网格的缝隙
阅读全文
0 0
- css3中网格布局(grid)的基本介绍
- CSS3 网格布局(grid layout)基础知识 - 隐式网格自动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)
- CSS3 网格布局(grid-layout)基础知识 - 弹性尺寸的定义单位:fr 简介及实例
- CSS3 网格布局(grid-layout)基础知识 - 网格模板属性(grid-template)使用说明
- ui-grid 网格布局
- ie10 grid 网格布局
- CSS Grid 网格布局
- CSS Grid布局:图解网格布局中术语之一
- CSS Grid布局:图解网格布局中术语三
- css3中网格布局与弹性盒子布局对比
- grid基础语法介绍(上) 《轴线与网格》里主要讲述了grid与flex中,网格与轴线的基本概念,了解了这些基本概念之后,我们可以更轻松地对布局方式进行研究,这一篇文章主要描述grid布局中,定义在容
- CSS3的基本介绍
- CSS Grid布局:网格区域
- CSS Grid布局:独立源与网格的层叠顺序
- CSS Grid布局:什么是网格布局
- CSS Grid布局:什么是网格布局
- CSS Grid布局:网格单元格布局
- CSS Grid布局:网格单元格布局
- spring-boot子模块打包去掉BOOT-INF文件夹
- SSH 免密码登录
- 高性能服务器--定时器
- 8.3 中继
- zheng项目系统简单的分析记录
- css3中网格布局(grid)的基本介绍
- 那个C币太难获取了!
- HttpClient 的概述
- Ubuntu修改hosts方法
- https://localhost:5500/em/login 登录不了
- NDK 安装小结
- ELK 日志分析系统
- 优信二手车助力浪漫90后 巨型快递见证甜蜜瞬间
- SpringBoot--使用Thymeleaf模板开发web项目