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. Centos 7 安装后设置

    1.宽带连接 终端: nm-connection-editor 添加:DSL 另外一篇:Centos7宽带连接 2.输入法设置 设置-->区域和语言--> + -->搜索chines ...

  2. linux_shell_数组

    shell数组类似与C语言,数组下标由0开始编号.想要获取数组中的元素要利用下标. 1.首先定义数组 在shell中,用括号来表示数组,数组元素用“空格”符号分割开.列: name=("d& ...

  3. 如何在idea中设置Tomcat虚拟路径

    设置项目的根路径: 设置指定文件的在Tomcat中的虚拟路径: 代码: String fileName = MyFileUtil.getFileName(uploadFileName); File f ...

  4. Codeforces35E(扫描线)

    E. Parade time limit per test:2 seconds memory limit per test:64 megabytes input:input.txt output:ou ...

  5. web自动化开发环境配置详解

    1.安装 nodejs Grunt和所有grunt插件都是基于nodejs来运行的, https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本 2.安装 grunt-C ...

  6. redis下载地址

    redisgithub下载地址:https://github.com/MicrosoftArchive/redis进入之后,如下所示进行下载. 进入页面进行选择版本下载. ,下载好之后,在本地解压如下 ...

  7. 与HttpSession相关的监听器

    概述 与HttpSession相关的监听器有四个:分别是HttpSessionListener.HttpSessionAttributeListener.HttpSessionBindingListe ...

  8. CentOS 7下安装Python3.5

    CentOS 7下安装Python3.5 •安装python3.5可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-deve ...

  9. C#中使用反射遍历一个对象属性和值以及百分数

    对某个类的实例化对象, 遍历获取所有属性(子成员)的方法(采用反射): using (var context = new YZS_TRAEntities()) { ).FirstOrDefault() ...

  10. 什么是 Azure 中的虚拟机规模集？

    虚拟机规模集是一种 Azure 计算资源,可用于部署和管理一组相同的 VM. 由于所有 VM 的配置都相同,因此无需对 VM 进行任何预先配置. 这样就可以更方便地构建面向大型计算.大数据.容器化工作 ...