CSS grid layout
CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。
像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。
示例:
<doctype html>
<html>
<head>
<title>title</title>
<style>
.wrapper { display: grid;/*网格布局*/ grid-template-columns: repeat(3, 1fr); /*把网格区域分成三等分为三列 "repeat(3,1fr)"等价于 "1fr 1fr 1fr */
grid-gap: 10px; /*网格间隙的宽度(网格线宽度?)*/
grid-auto-rows: minmax(100px, auto); /*指定网格行的行高最小值为100px*/
}
.one {
grid-column: 1 / 3; /*列的范围从第一条网格线开始到第三条网格线结束,下同*/
grid-row: 1; /*行的范围指定为第一行单行,下同*/
border-style:solid; /*加边框为了便于观察,下同*/
border-color:#f00;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
border-style:solid;
border-color:#0f0;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
border-style:solid;
border-color:#00f;
}
.four {
grid-column: 3;
grid-row: 3;
border-style:solid;
border-color:#ff0;
}
.five {
grid-column: 2;
grid-row: 4;
border-style:solid;
border-color:#0ff;
}
.six {
grid-column: 3;
grid-row: 4;
border-style:solid;
border-color:#f0f;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
result:
CSS grid layout的更多相关文章
- CSS: Grid Layout Module
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...
- [CSS] Get up and running with CSS Grid Layout
We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then ...
- CSS Grid Layout In Action
CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...
- css grid layout in practice
css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...
- 各个浏览器开启CSS Grid Layout的方式
2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...
- CSS Grid layout布局
CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...
- CSS grid layout demo 网格布局实例
直接 上代码,里面我加注释,相当的简单, 也可以去我的github上直接下载代码,顺手给个星:https://github.com/yurizhang/micro-finance-admin-syst ...
- 关于CSS Grid Layout的代码解释
.wrapper { display: grid; /*生成grid类型块级网格*/ grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1 ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
随机推荐
- JavaScript高级编程——Date类型
JavaScript高级编程——Date类型 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- flutter 监控返回键
return new WillPopScope( child: Scaffold( body: new Center( child: new Column( children: <Widget& ...
- Unity Profiler连接Android真机调试
Profiler在Editor模式就可以观看性能消耗,但是毕竟电脑配置高,跟手机真机环境还是有区别.实际开发中的优化还是推荐用真机测试. 因为IOS一般比Android手机的配置高,在Android平 ...
- show命令
数据库 show databases; 表 show tables; show tables in xxdb; show tables 'a*'; tblproperties show tblprop ...
- Group by 分组查询 实战
实战经历,由于本人在共享单车上班,我们的单车管理模块,可以根据单车号查询单车,但是单车号没有设置unique(独一无二约束),说以这就增加了单车号可能重复的风险,但是一般情况下,单车号是不会重复的,因 ...
- Django 自定义表
1.Django自带的用户表 create table auth_user ( id int auto_increment primary key, password varchar(128) not ...
- TI(德州仪器) TMS320C674x逆向分析之二
TI官网文档: http://www.ti.com/product/tms320c6745/technicaldocuments 里面资料非常详细,可以对着里面一个个看,用的比较多的两个文档: TMS ...
- 腾讯云Centos安装nginx
使用的是腾讯云主机,选择的镜像如下: Centos7+ 64bit; nginx 1.7.12 1.安装依赖 yum -y install gcc gcc-c++ wget net-tools pcr ...
- 推荐:Asp.Net MVC 多语言(html+js共用一套资源文件)
此文主要是最近做多语言的工作的一个经验分享.文中的内容为参照多位大神的方案后,自己揉捏出来的一个新的方案,对于html和javascript部分的多语言的切换,共用一套资源文件.代码中主要是使用 IH ...
- NIO 学习笔记
0. 介绍 参考 关于Java IO与NIO知识都在这里 ,在其基础上进行修改与补充. 1. NIO介绍 1.1 NIO 是什么 Java NIO 是 java 1.4, 之后新出的一套IO接 ...