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. js-ES6学习笔记-for...of循环

    1.一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for...of循环遍历它的成员.也就是说,for...of循环内部调用的是数据结构的Symbo ...

  2. 从零开始学习html（十三） CSS代码缩写，占用更少的带宽

    一.盒模型代码简写 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  3. Echarts地图绘制（散点，色卡）

    echarts绘制地图时,提供了js内部注册,也提供了json数据手动注册,这两种都可以绘制对应地图,但有一点不同的是,js内部只注册了中国地图和世界地图,而json数据提供了世界,中国,中国城市的数 ...

  4. jsp登录显示

    1.登录成功设置session request.getSession().setAttribute("user", user); 2.前台test <div class=&q ...

  5. 简单三招，设计复杂ERP报表

    报表无疑是ERP系统中用到的最频繁的单据之一.比如每天采购要打印采购明细帐:仓库每天要导出收货或者出货明细:销售每天要打印订单明细等.故报表的设计在ERP系统开发中占据大半江山. 不过笔者在实际工作中 ...

  6. Windows应用程序进程级别统一监控实践

    一般的系统级别指标监控,更多关注CPU.内存.磁盘.网络等运行情况,对应用程序运行时的进程指标关注不够,导致不能深入了解系统运行状态.本文根据笔者应用实践,探讨一下进程级别监控涉及到的监控内容以及监控 ...

  7. XQuery使用sum求和，提示char不能转换为money解决方法

    select axml.value('sum(/root/pro/price)','money') 以上代码提示‘char不能转换为money’的错误,发现值为'0.0E0'.改为: select a ...

  8. Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具

    Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具 A simple CLI for scaffolding React.js ...

  9. DataContract和DataMember的作用

    数据契约(DataContract)里的DataMember特性  来源于网络,用于个人收集及备忘 数据契约(DataContract) 服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务端 ...

  10. 如何扩展 Azure 资源组中虚拟机的 OS 驱动器

    概述 在资源组中通过从 Azure 应用商店部署映像来创建新的虚拟机 (VM) 时,默认的 OS 驱动器空间为 127 GB. 尽管可以将数据磁盘添加到 VM(数量取决于所选择的 SKU),并且我们建 ...