大家好，我是讯享网，很高兴认识大家。



 <div id="single_top"></div> 

讯享网

先上图


讯享网

Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局

gird布局很强大，采用网格布局的区域，称为"容器"（container）。容器内部子元素，称为"项目"（item），即

：Grid 布局只对项目生效，项目只能是容器的一级子元素，不包含项目的子元素

下面从容器属性和项目属性两大块来记录grid布局中的相关属性

全文代码基于

下面开始我们的正文

1. display属性

为一个容器采用网格布局模式

• 将元素定义为网格容器，并为其内容建立新的网格格式化上下文，属性值有2个：
  • ：生成一个块级网格
  • ：生成一个行级网格

在大多数场景下我们往往采用块级网格，会像块级元素一样占满一行。

对于行级网格，它就能让容器与其他元素共占一行，容器和行内块元素基本一致

：为网格布局以后，容器子元素（项目）的、、等设置都将失效。

左侧是，右侧是

2. 网格轨道

至关重要

属性：定义每一列的列宽

属性：定义每一行的行高

在上面的代码中划分了一个三行三列，列宽和行高都是200px的网格

在这个属性下有很多的小属性来帮助我们优化

当我们需要写很多行很多列的时候，一个个敲相同的值会非常麻烦，这时候就可以使用函数，简化重复值

• 接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值

不止于此，还可以重复某种模式，就像

这句代码定义了6列，分别是200，100，200，100，200，100

还是很容易理解的，简单说就是重复后面的值几遍

1. 关键字

表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格

当我们只需要确定列宽或者行高，而不用理有多少列时，就可以使用它了

每一列200px，列数设置为了会自动填充，此时缩小浏览器的宽度，项目会因填充不下而另起一行

1. 关键字

单位代表网格容器中可用空间的一等份。使用方法如下

表示第一个列宽设置为 ，后面剩余的宽度分为两部分，第二给项目占，第三个项目占

从图中可以看出第三列始终占据着剩余位置中的2份，列宽始终是第二列的二倍

函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值

• 也就是说最大不会超过最大值，最小不能小过最小值

上面的代码表示列宽不小于400px，不大于1fr

1. 关键字

设置后，将由浏览器自行决定长度，尽可能的会占满剩余空间，除非有其他设置，例如有之类的，利用这个关键字，我们可以轻易实现三列或者两列布局。

对中间那列设置了auto，实现了中间自适应的三栏布局

1. 网格线

grid布局叫做网格布局，那自然少不了网格线的存在，使用方括号，指定每一根网格线的名字，方便以后的做定位时使用

就像这样定义了一个的网格区域，就需要有4条水平线，4条垂直线

3. 网格间距

属性设置行与行的间隔（行间距），属性设置列与列的间隔（列间距）。

：在很多的博客中采用的都是带有前缀的方式，目前这种定义网格间距的方式已经被废弃了，所以还是尽量采用这种写法

在这段代码中定义了行间距为，列间距为，也可以采用合并属性来写的意思和上面相同，第一个参数是行间距，第二个是列间距

4. grid-template-areas 属性

用于定义区域，一个区域由一个或者多个单元格组成

上面的代码划分出了9个单元格，然后将其命名为的9个区域，分别对应9个单元格

我们也可以将多个单元格合并成一个区域

上面的代码中将9个单元格划分成了4个区域

在我们常见的布局中

像上面的代码中，就划分出了4个部分，这里省略了，为了和全为配一配，问题不大 :happy: 在后面会学习怎么操作这些区域，现在先了解划分区域

：如果某些区域不需要利用，则用"点"（）表示。

就像这样

用占取的位置，不会被划分于任何区域，也就是在上面的代码中，只划分了6个区域

：区域的命名会影响到网格线的名字，对于区域它的起始线叫做，结束线叫做

5. grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。

这个顺序由属性决定，默认值是，即"先行后列"。也可以将它设成，变成"先列后行"。

：盒子的排列顺序变成了先列后行

还有两个特殊的属性值和

当我调整我们的代码将某一个项目拉长时，会有这一行放不下的情况，就像图片左边这个场景一样，第6个项目因为太长了放不上去，那个位置被空出来了，我们可以尝试使用。

结果就会得到右边的情形，7号自动的补了上去

在实际应用中，我们可能想让下面长度合适的填满这个空白，这个时候可以设置 ，表示尽可能填满表格

：把某个项目长度变长使用的是项目属性，后面会写到

6. 单元格内容排列方式

属性设置单元格内容的水平位置（左中右）， 属性设置单元格的垂直位置（上中下）

这里只以做展示，另一个同理，只是一个水平一个垂直的差别

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

在上面的代码中，表示单元格内部居中

对于 和 属性，可以采用合并的写法

代表的意思是垂直方向子项对齐起始位置，水平方向对齐结束位置

：如果只写一个值，默认第二个值与第一个相等

7. 内容区域的排列方式

属性是定义整个内容区域在容器里面的水平位置（左中右），属性是定义整个内容区域的垂直位置（上中下）

有以下几个属性

• start ：对齐容器的起始边框。
• end ：对齐容器的结束边框。
• center ：容器内部居中。

上面代码依次从上到下对应

• stretch ：项目大小没有指定时，拉伸占据整个网格容器。
  
  
• space-around ：每个项目两侧的间隔相等。因此，项目之间的间隔比项目与容器边框的间隔大一倍

• space-between ：项目与项目的间隔相等，项目与容器边框之间没有间隔。

• space-evenly ：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

8. 设置多余网格

对于网格有显式网格和隐式网格，显示网格通过 和 属性中定义的行和列，当实际行数或者列数大于设置的行列数时，就会有多余的网格，这些网格的宽高通过和属性来设置

在上面的代码中设置了4*2的网格，但是我们一共用9个项目，通过设置了多余网格的高度

这部分是关于项目的属性，也就是说这些属性要写到项目自己的身上，不能再写到身上

1. 指定项目的位置

实现的原理其实是指定项目的四个边框，分别定位在哪根网格线

• 属性：左边框所在的垂直网格线
• 属性：右边框所在的垂直网格线
• 属性：上边框所在的水平网格线
• 属性：下边框所在的水平网格线

上面的代码中指定了1号项目的左边框从第二条网格线开始，第4条网格线结束，因此将会占据2个网格

也可以使用关键字，来实现占2个网格这样的效果，可以将它理解为跨越的意思

表示的意思是：1号项目的左边框距到右边框跨越了2个网格。

对于上面的4个属性可以采用简写的方式，例如

这里的不是除号的意思，仅是占位的作用。其中的第一行代码，制定了上边框在第1条网格线，下边框在第4条网格线，第二行代码同理。

如果只写一个数字的话，默认跨越1个网格

：当我们遇到两个项目占据位置重叠时我们可以采用属性确定上下关系，就像这样

给1号和3号项目添加了属性，指定他们的占据位置，效果如左图

给一号盒子添加了后，一号盒子到了上层

2. grid-area属性

在前面容器属性讲过属性，当时只是知道了怎么划分区域，现在这个属性就是怎么把项目指定给区域

首先我们先利用属性在容器上划分区域，上面划分了4块区域，下面我们通过给项目添加属性，来给它指定到某个区域当中

上面的代码中，将1号项目指定到了区域，也就是右下角2个网格

：2个区域之间需要紧挨，不能隔开

3. 网格内容排列方式（单个项目）

• 属性设置单元格内容的水平位置（左中右），跟属性的用法完全一致，但只作用于单个项目。
• 属性设置单元格内容的垂直位置（上中下），跟属性的用法完全一致，也是只作用于单个项目。

属性值：start | end | center | stretch

从这个单词来说，就有自身的意思吧（工地英语，我说有就有），也就是只对当前项目本身有效

分别对应三个属性值，其中拉伸会占满网格整行

分别对应三个属性值，其中拉伸会占满网格整列

同样的，存在着合并简写属性，可以通过这个来指定和的值，前后顺序如下：

---

以上就是关于网格布局的全部内容了

布局中属性有很多，一定要通过实战来记这些属性，要区分好容器属性，和项目属性这是重中之重，多动手才是王道！

牢记此图！

1. 图文详解前端CSS中的Grid布局，你真的可以5分钟掌握

   前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...

2. css 中的grid布局基础

   CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...

3. CSS的flex布局和Grid布局

   一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

4. CSS3 Flex布局和Grid布局

     1 flex容器的六个属性 flex实现垂直居中: <div class="box"> <span class="item">< ...

5. 前端页面布局之Grid布局

   在讲布局前,先说两句题外话,写博时,突然想到了郭德纲说过的一个段子“说两个人骂架,不是你有理,你嗓门大,你唾沫星子崩我一脸,你就能骂赢,要看谁命长,过两年你死了,我站你坟头咋说咋是对的,你在那小匣里还 ...

6. 关于基本布局之——Grid布局

   Gird布局 一.关于概念 网格布局(Grid)是一个很强大的 CSS 布局方案.它可以将网页划分为多个网格任意拼接的布局,可以灵活的运用并实现出多种布局形式. (grid和inline-grid区别 ...

7. 轻轻松松学CSS:Grid布局

   网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...

8. 学懂grid布局：这篇就够了(译)

   上周发过一篇关于flex布局的文章,但发完之后我感觉我并没有写很多自己对flex布局的理解,因为原链接的作者的轮子实在是太强了,这里借用知乎大佬牛岱的话来说,当人家已经有足够好的轮子,你就不要试图,甚 ...

9. 你需要的Grid布局入门教程

   一.Grid布局概述 首先,Grid 布局与 Flex布局 有一定的相似性,都可以指定容器内部多个项目的位置.但是,Grid 布局远比 Flex 布局强大! Flex 布局是轴线布局,只能指定&quo ...

讯享网 <li>Spring 学习笔记（四）：Spring AOP <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">1 概述 本文主要讲述了AOP的基本概念以及在Spring中AOP的几种实现方式. 2 AOP AOP,即Aspect-Oriented Programming,面向切面编程,与OOP相辅相成.类似的 ...</p> </li> <li>git推送代码报错：fatal: The current branch master has no upstream branch. To push the current branch and set the remote as upstream <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">情景再现 远程新建仓库,然后本地 git bash执行以下代码 git init git add . git commit -m 'xxx' git remote add origin https:/ ...</p> </li> <li>重绘DevExpress的XtraMessageBox消息提示框控件 <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">先来看提示框,可以看到框其实是一个去掉最大化.最小化按钮后的窗体,窗体的内容就是我们想要提示的内容,重绘提示框其实就是重绘窗体以及中间部分的内容. 首先重绘窗体,消息提示框的窗体不是XtraForm而 ...</p> </li> <li>mooc人大单元测试4 <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">@font-face { font-family: Wingdings } @font-face { font-family: 宋体 } @font-face { font-family: &quot ...</p> </li> <li>.NET 中的 Worker Service 入门介绍 <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">翻译自 Steve Gordon 2020年3月30日的文章 &lt;WHAT ARE .NET WORKER SERVICES?&gt; [1] 随着 .NET Core 3.0 的发布,ASP.N ...</p> </li> <li>hdu1247 字典树或者hash <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">题意:      给你一些串,问你哪些串是由其他两个串连接成的. 思路:        我用了两种方法,一个是hash,hash的时候用map实现的,第二种方法是字典树,字典树我们枚举每个一字符串,查 ...</p> </li> <li>缓冲区溢出分析第07课：MS06-040漏洞研究——静态分析 <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">前言 我在之前的课程中讨论过W32Dasm这款软件中的漏洞分析与利用的方法,由于使用该软件的人群毕竟是小众群体,因此该漏洞的危害相对来说还是比较小的.但是如果漏洞出现在Windows系统中,那么情况就 ...</p> </li> <li>hdu4046 不错的线段树单点更新 <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">题意:       给一个字符串,两种操作 0 a b 询问a,b之间有多少个wbw, 1 a c 就是把第a个改成c. 思路:       这个题目我们可以用线段树的点更新来做,一开始写了个好长好长 ...</p> </li> <li>JQuery跨站脚本漏洞 <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">原理: jQuery中过滤用户输入数据所使用的正则表达式存在缺陷,可能导致 location.hash 跨站漏洞 影响版本: jquery-1.7.1~1.8.3 jquery-1.6.min.js, ...</p> </li> <li>Jmeter软件安装之Mac <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">Jmeter软件安装之Mac 一.环境准备 安装JDK 下载Jmeter 二.下载Jmeter 下载地址: http://jmeter.apache.org/download_jmeter.cgi,下 ...</p> </li> </ol>