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的更多相关文章

  1. CSS: Grid Layout Module

    Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...

  2. [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 ...

  3. CSS Grid Layout In Action

    CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...

  4. css grid layout in practice

    css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...

  5. 各个浏览器开启CSS Grid Layout的方式

    2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...

  6. CSS Grid layout布局

    CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...

  7. CSS grid layout demo 网格布局实例

    直接 上代码,里面我加注释,相当的简单, 也可以去我的github上直接下载代码,顺手给个星:https://github.com/yurizhang/micro-finance-admin-syst ...

  8. 关于CSS Grid Layout的代码解释

    .wrapper { display: grid; /*生成grid类型块级网格*/ grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1 ...

  9. css之Grid Layout详解

    css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...

随机推荐

  1. Code Signal_练习题_variableName

    Correct variable names consist only of English letters, digits and underscores and they can't start ...

  2. svn本地连接服务器失败,但是浏览器可以

    tortoise svn无法连接到服务器,清空“Autherticate data”后,再进行更新,提交,log查看等操作,svn还是不提示输入用户名和密码,而是报: error: Unable to ...

  3. Input type=number 样式清除

    /* 普通IE浏览器 样式清除 */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appear ...

  4. 绝版Node--Sequlize搭建服务(Node全栈之路)

    绝版Node--Sequlize搭建服务(Node全栈之路) 参考资料:https://itbilu.com/nodejs/npm/VkYIaRPz-.html 准备环境:Mysql,Node 前沿: ...

  5. sublime中如何用less实现css预编译

    实现css预编译的方式有很多,听说glup很流行而且功能也很强大,但是就目前的工作而言,仅要css预编译和YUIcompress就够了,接下来切入正题 Less 是一门 CSS 预处理语言,它扩展了 ...

  6. 找回master库中被删除的系统表

    接手的某个数据库实例中,master数据库中的所有系统表都被误删除掉了. 最直接影响就是一旦涉及到要查询这些系统表,就会出现错误. 例如,右键点击某个数据,查看属性时会出现如下图所示错误: 那么怎么找 ...

  7. USB 相关笔记

    1分析已有代码项目 Android从USB声卡录制高质量音频-----使用libusb读取USB声卡数据 github 项目:usbaudio-android-demo usb声卡取数据项目也是参考的 ...

  8. setuid、setgid、sticky的权限简单用法

    如何设置setuid.setgid.sticky的权限: setuid :置于 u 的 x 位,原位置有执行权限,就置为 s,没有了为 S . chmod 4xxx file chmod u+s xx ...

  9. pychram使用技巧

    1.代码添加断点 点击对应行代码,按ctrl+F8,即可添加断点 2.查看内置函数的源码 点击对应函数后按crtl+B

  10. easyui学习笔记14-拓展的基本验证规则

    /** * 扩展的基本校验规则, */ $.extend($.fn.validatebox.defaults.rules, { minLength : { // 判断最小长度 validator : ...