Grid被设计来做一些Flexbox不能做的事情，所以不是被设计来取代Flexbox的。

flexbox 一维的

Grid 二维的

总结: 

Grid Items作用在Grid Container的直接子元素下

下面给出一些示例：

1.html:

<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
/*
grid-column-gap: 1em;
grid-row-gap:1em;
*/
grid-gap: 1em;
}
.wrapper>div {
background: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
background: #ddd;
}
</style>
<body>
<!-- 这个最外面包裹的是wrapper 下面有5个div:4个Lorem和1个Hello -->
<div class="wrapper">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis aperiam a molestias dolores nobis alias sint unde eveniet
ex saepe, quas, praesentium dolorem vitae magni dolore doloremque? Aspernatur, voluptatum possimus! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Blanditiis aperiam a molestias dolores nobis alias sint unde eveniet
ex saepe, quas, praesentium dolorem vitae magni dolore doloremque? Aspernatur, voluptatum possimus!
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur reprehenderit quae, obcaecati eveniet at accusamus rem!
Debitis autem minima eaque accusantium vitae. Ab esse distinctio laborum harum voluptas eligendi minima.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis aperiam a molestias dolores nobis alias sint unde eveniet
ex saepe, quas, praesentium dolorem vitae magni dolore doloremque? Aspernatur, voluptatum possimus! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Blanditiis aperiam a molestias dolores nobis alias sint unde eveniet
ex saepe, quas, praesentium dolorem vitae magni dolore doloremque? Aspernatur, voluptatum possimus!
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur reprehenderit quae, obcaecati eveniet at accusamus rem!
Debitis autem minima eaque accusantium vitae. Ab esse distinctio laborum harum voluptas eligendi minima.
</div>
<div>Hello</div>
</div>
</body>
</html>

2.html:

<style>

.wrapper{

display: grid;

/* grid-template-columns:1fr 1fr 1fr;  fr的意思是fraction，就是分数 ，x分之一*/

grid-template-columns: repeat(3,1fr);

/* grid-template-columns: repeat(4,1fr 2fr); */

grid-gap:1em;

grid-auto-rows: 100px; (注意看这个属性)

}

.wrapper>div {

background: #eee;

padding: 1em;

}

.wrapper>div:nth-child(odd) {

background: #ddd;

}

</style>

</head>

<body>

<div class="wrapper">

<div>

Lorem ipsum dolor sit.

</div>

<div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam cumque possimus eveniet aliquid. Impedit delectus architecto veritatis? Tempora cupiditate esse odio placeat doloribus nisi quaerat laudantium dolor, illum laborum consequuntur eaque est minus? Ex quae eius expedita dolor ab possimus.

</div>

<div>

Lorem ipsum dolor sit.

</div>

<div>

Lorem ipsum dolor sit.

</div>

<div>

Lorem ipsum dolor sit.

</div>

<div>

Lorem ipsum dolor sit.

</div>

<div>

Lorem ipsum dolor sit.

</div>

</div>

</body>

(grid-auto-rows属性)

.wrapper{

display: grid;

/* grid-template-columns:1fr 1fr 1fr; */

grid-template-columns: repeat(3,1fr);

/* grid-template-columns: repeat(4,1fr 2fr); */

grid-gap:1em;

/* grid-auto-rows: 100px; */

//最小100px 要是多了就拉伸

grid-auto-rows:minmax(100px,auto);

}

(grid-auto-rows:minmax(100px,auto);属性)

2.html完整代码

<style>

*{

margin:0;

padding:0;

}

.wrapper{

display: grid;

/* grid-template-columns:1fr 1fr 1fr; */

grid-template-columns: repeat(3,1fr);

/* grid-template-columns: repeat(4,1fr 2fr); */

grid-gap:1em;

/* grid-auto-rows: 100px; */

grid-auto-rows:minmax(100px,auto);

}

.nested{

display: grid;

grid-template-columns: repeat(3,1fr);

grid-auto-rows:70px;

grid-gap:1em;

}

.wrapper>div {

background: #eee;

padding: 1em;

}

.wrapper>div:nth-child(odd) {

background: #ddd;

}

.nested > div{

border: #333 1px solid;

padding: 1em;

}

</style>

<body>

<div class="wrapper">

<div>

Lorem ipsum dolor sit.

</div>

<div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam cumque possimus eveniet aliquid. Impedit delectus architecto veritatis? Tempora cupiditate esse odio placeat doloribus nisi quaerat laudantium dolor, illum laborum consequuntur eaque est minus? Ex quae eius expedita dolor ab possimus.

</div>

<div class="nested">

<div>Lorem</div>

<div>Lorem</div>

<div>Lorem</div>

<div>Lorem</div>

<div>Lorem</div>

<div>Lorem</div>

<div>Lorem</div>

<div>Lorem</div>

<div>Lorem</div>

</div>

<div>

Lorem ipsum dolor sit.

</div>

<div>

Lorem ipsum dolor sit.

</div>

<div>

Lorem ipsum dolor sit.

</div>

<div>

Lorem ipsum dolor sit.

</div>

</div>

</body>

3.html:

<style>

*{

margin:0;

padding:0;

}

.wrapper{

display: grid;

grid-template-columns: 1fr 2fr 1fr;

grid-auto-rows: minmax(100px ,auto);

grid-gap:1em;

justify-items: start;(注意看这里)

}

.wrapper>div {

background: #eee;

padding: 1em;

}

.wrapper>div:nth-child(odd) {

background: #ddd;

}

</style>

</head>

<body>

<div class="wrapper">

<div class="box box1">Box 1</div>

<div class="box box2">Box 4</div>

<div class="box box3">Box 4</div>

<div class="box box4">Box 4</div>

</div>

</body>

(justify-items:center)

(justify-items:end)

(justify-items:stretch)  //default

(align-items:start)

(align-items:center)

(align-items:end)

(align-items:stretch)    //default

LineNumbers

grid-column:1/3;

(without)

(with)

.box1{

grid-column:1/3;

/* this means 'one' to 'three' */

}

.box1{

/* align-self:start; */

grid-column:1/3;

grid-row: 1/3;

/* this means 'one' to 'three' */

}

.box2{

grid-column: 3;

grid-row: 1/3;

/* align-self: end; */

}

.box3{

grid-column: 2/4;

grid-row: 3;

/* justify-self: end; */

}

.box4{

grid-column: 1;

grid-row: 2/4;

}

(overlap重叠)

CSS Grid(CSS网格)的更多相关文章

  1. CSS--使用CSS Grid（网格）布局

    .一 CSS Grid(网格布局)简介 CSS Grid 布局由两个核心组成部分是父元素和子元素,父元素 是实际的 grid(网格),子元素是 grid(网格) 内的内容.下面是一个父元素和六个子元素 ...

  2. CSS Grid基于网格的二维布局系统(详细教程)

    .grid-wrap{ display: inline-flex; padding: 20px; background: #f4f4f4; word-break: initial; } .handle ...

  3. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  4. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  5. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  6. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  7. css - Grid网格布局

    .wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...

  8. css grid 网格布局

    前几天研究了一下这个布局方式,笔记待更新 先放一下学习站点 文档 我应该尝试使用CSS Grid Layout的IE实现吗 https://hacks.mozilla.org/2018/02/css- ...

  9. CSS Grid layout布局

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

随机推荐

  1. web前端知识框架

  2. C# List源码分析(二)

    常用操作的复杂度分析 Contains 该方法是一个O(n)的方法,是根据顺序依次遍历整个列表的,观看源码,跟JAVA还是有不少分别的,在上一篇中就有发现,因为C#对Primitive类型是有处理的, ...

  3. ORA-29857: 表空间中存在域索引和/或次级对象

    今天小编在操作 oracle 数据库,删除表空间时引发了异常!! SQL> drop tablespace nbmap including contents; 为什么会造成以上的异常呢? 根据小 ...

  4. hdu 1385 floyd记录路径

    可以用floyd 直接记录相应路径 太棒了! http://blog.csdn.net/ice_crazy/article/details/7785111 #include"stdio.h& ...

  5. CAD-强电常用符号集

  6. [ASP.NET]asp.net动态加载用户控件

    用户控件 // 用户控件源码 namespace wzjr.control { public partial class Topic : System.Web.UI.UserControl { pub ...

  7. pl/sql sql窗口允许输出和允许变量替换

    pl/sql sql窗口允许输出和允许变量替换 允许输出:类似在命令窗口中输入的 setserveroutput on; 允许变量替换:如果点击了这个,类似于执行 set define off命令 在 ...

  8. Gradle：构建脚本概要

    一.构建块 1.每一个构建块都包括三个基本构建块:project.task和property: 2.每一个构建块包括至少一个project,进而又包括一个或多个task: 3.project和task ...

  9. 使用ClassLoader类装载器获取系统资源

    使用ClassLoader类装载器获取系统资源 2010-05-11 16:19:39 分类: Java /* ClassLoader 有两种方法获得系统资源,一个种静态方法,一种是实例方法. 静态方 ...

  10. 项目记录22-- tolua基于lua框架事件派发

     每天晚上抽点时间写一点点就一点点,曾经不写博客可是如今.不为别的仅仅是为了告诉别人我还存在.         这几天在地铁上发现好多人都还在玩消除游戏,今天起码看到5个人,可是玩的版本号都不一样.看 ...