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. koajs项目之memcached实现session共享

    在做nodejs服务的负载时要考虑到session共享的问题,一般常用的就是memcached方式实现的,本文主要介绍通过npm社区的几个模块轻松实现这个功能. 做koa的session一般会想到用k ...

  2. 【代码笔记】iOS-将地址解析成经纬度

    一,工程图. 二,代码. ViewController.h #import <UIKit/UIKit.h> #import <CoreLocation/CoreLocation.h& ...

  3. SD从零开始11-12

    SD从零开始11 定价中的条件技术(Condition Technique in Pricing) 定价程序Pricing Procedure 所有定价中允许的条件类型都包含在定价程序中: 通过为每个 ...

  4. chrome浏览器使用chrome://inspect调试app 网页，打开空白的问题

    使用chrome浏览器,输入chrome://inspect可以调试android app里面的网页,如果inspect的时候,是空白, 问题截图: 那就在C:\Windows\System32\dr ...

  5. OpenCV 图形变换

    1.图片缩小 matScale=np.float32([[0.5,0,0],[0,0.5,0]]) dst=cv2.warpAffine(img,matScale,(int(height/2),int ...

  6. Expo大作战(一)--什么是expo，如何安装expo clinet和xde，xde如何使用

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  7. [Android] 图片裁剪总结——自定义裁剪工具

    上次弄完调用系统裁剪之后,我又试着做一个自定义的裁剪工具. 原文地址请保留http://www.cnblogs.com/rossoneri/p/3988405.html 老习惯,文章开始前还是先把我参 ...

  8. python 使用else代替状态变量

    翻看公司的代码文档,在代码风格文档中,写着:为了提高代码的可维护性,代码中减少flag这类状态变量的使用.这个问题,平时确实没有想过,面对这种需求时,第一反应就是使用flag标记状态.那么使用什么样的 ...

  9. android 解决连接电视机顶盒失败的方法

    今天在开发过程中,需要连接海美迪的电视盒子,这个盒子是基于android6.0的版本,之前连接其它电视盒子都正常,当输入 adb -s xxxx shell后,盒子连接失败,日志如下: error: ...

  10. 使用postman给servlet传各种参数

    web开发中经常会使用到postman软件,常用的方法涉及到get和post方法去获取对应json数据,get方法直接传url就可以,返回对应json数据.但是post请求就需要json数据提交,而且 ...