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的filter方法

    filter()方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组. 基本语法: arr.filter(callback[, thisArg]) 参数介绍: 参数名 说明 cal ...

  2. 使用PHP把图片上传到七牛

    先从官网下载SDK,然后新建一个文件,里面包括上传,下载,删除 <?php header("Content-Type:text/html; charset=utf8"); r ...

  3. 帆软发布大数据直连引擎FineDirect，对焦大数据BI

    摘要:近日,帆软官方正式发布大数据直连引擎FineDirect模块.通过该模块,企业在应用FineBI原有功能的基础上,可直接对接现有数据源,无论是传统的关系型数据库,还是Hadoop生态圈.Mpp构 ...

  4. Android--根据子控件的大小自动换行的ViewGroup

    1.自定义ViewGroup /** * Created by Administrator on 2016/2/26. * * --------自动换行的ViewGroup----------- */ ...

  5. CSS 小结笔记之伸缩布局 (flex)

    CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...

  6. Laravel安装教程

    1.Call to undefined function Illuminate\Encryption\openssl_cipher_iv_length() 报这个错是因为Apache/bin目录下 l ...

  7. 调研getfit

    Gitfit实际是一个提供私人教练的服务,其主要业务有三种,“局部减脂”每天0.5-1小时,对局部高强度的刺激,快速达到塑形目地,不需要复杂器械,0基础也能跟上训练进度,并提供咨询师.营养师团队.专属 ...

  8. Sql server 使用drop database 语句，无法删除正在使用的数据库的解决办法

    使用DROP DATABASE 删除数据库  显示“无法删除数据库 ,因为该数据库当前正在使用. 解决办法:在删除某一个数据库(下例中的“DB1”数据库)前,强制kill掉该数据库上的所有数据库连接. ...

  9. for之于while的优势

    前言 for与while各有功效,下面就只列举for之于while的优势有哪些 优势 1.循环中提供了特殊的机会来将变量的作用域最小化.(无论是传统的还是for-each形式的)for循环,都允许声明 ...

  10. UIButton vs UIEventListener 事件处理

    NGUI的事件 在使用NGUI的事件处理时,发现UIButton和UIEventListener之间的共同点越来越多. 当然处理事件,也有一些其它的函数,比如:UIEventTrigger,Butto ...