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基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
随机推荐
- Code Signal_练习题_variableName
Correct variable names consist only of English letters, digits and underscores and they can't start ...
- svn本地连接服务器失败,但是浏览器可以
tortoise svn无法连接到服务器,清空“Autherticate data”后,再进行更新,提交,log查看等操作,svn还是不提示输入用户名和密码,而是报: error: Unable to ...
- Input type=number 样式清除
/* 普通IE浏览器 样式清除 */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appear ...
- 绝版Node--Sequlize搭建服务(Node全栈之路)
绝版Node--Sequlize搭建服务(Node全栈之路) 参考资料:https://itbilu.com/nodejs/npm/VkYIaRPz-.html 准备环境:Mysql,Node 前沿: ...
- sublime中如何用less实现css预编译
实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题 Less 是一门 CSS 预处理语言,它扩展了 ...
- 找回master库中被删除的系统表
接手的某个数据库实例中,master数据库中的所有系统表都被误删除掉了. 最直接影响就是一旦涉及到要查询这些系统表,就会出现错误. 例如,右键点击某个数据,查看属性时会出现如下图所示错误: 那么怎么找 ...
- USB 相关笔记
1分析已有代码项目 Android从USB声卡录制高质量音频-----使用libusb读取USB声卡数据 github 项目:usbaudio-android-demo usb声卡取数据项目也是参考的 ...
- setuid、setgid、sticky的权限简单用法
如何设置setuid.setgid.sticky的权限: setuid :置于 u 的 x 位,原位置有执行权限,就置为 s,没有了为 S . chmod 4xxx file chmod u+s xx ...
- pychram使用技巧
1.代码添加断点 点击对应行代码,按ctrl+F8,即可添加断点 2.查看内置函数的源码 点击对应函数后按crtl+B
- easyui学习笔记14-拓展的基本验证规则
/** * 扩展的基本校验规则, */ $.extend($.fn.validatebox.defaults.rules, { minLength : { // 判断最小长度 validator : ...