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. vim牛逼的code工具: ctags+ cscope

    自己总结 在我的工作目录里的.vimrc中做了这样的配置:   set tags=tags;   set autochdir 在项目根目录里利用"sudo ctags -R *", ...

  2. 【转载】springboot注解

    https://blog.csdn.net/yitian_66/article/details/80866571 springboot注解:@Service: 注解在类上,表示这是一个业务层bean@ ...

  3. crontab 设置定时任务

    查看当前用户已有的定时任务: crontab -l 编辑crontab: crontab -e 加入需要执行的命令: 0 */4 * * * /www/shwww.net/venv/bin/pytho ...

  4. Android内存管理-SoftReference的使用

    本文介绍对象的强.软.弱和虚引用的概念.应用及其在UML中的表示. 1．对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有 ...

  5. 00069_DateFormate

    1.DateFormate类概述 (1)DateFormat 是日期/时间格式化子类的抽象类,它以与语言无关的方式格式化并解析日期或时间.日期/时间格式化子类(如 SimpleDateFormat类) ...

  6. Spring管理流程部署——Activiti

    pom.xml <!-- activit jar 包 --> <dependency> <groupId>org.activiti</groupId> ...

  7. smartctl----硬盘状态监控

    smartmontools介绍 smartmontools是一款开源的磁盘控制,监视工具,可以运行在Linux,Unix,BSD,Solaris,Mac OS,OS/2,Cygwin和Windows上 ...

  8. [Office]PPT 2013如何设置图片为半透明？

    PPT里面似乎无法直接为图片设置透明度属性.下面是一种变通的办法. 1,插入一个和图片大小一致的图形(矩形):2,右键插入的矩形,然后在属性设置里选择“图片填充”,选择以需要的图片填充到该矩形里:3, ...

  9. tableView计算动态行高的总结

    研究tableView怎么计算动态行高研究了两天一直还不太会,今天最终做出来了想要的效果. 首先.我在网上搜集了非常多资料,各种大神的总结,然后開始看.研究.试验,基本思路都是一样的. 1.一定要将l ...

  10. 从头认识java-13.5 利用泛型构建复杂模型

    这一章节我们来展示一下如何利用泛型构建复杂模型? 1.元组列表 我们之前已经说过元组是一个复杂的模型,能够返回多对象. package com.ray.ch11; import java.util.A ...