GRID（网格）布局

GRID布局

GRID布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，它与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。
但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

容器和项目

<section><div><p></p></div><div><p></p></div><div><p></p></div>
</section><!-- 以上section为容器、div为项目 （项目不包括p标签） -->

行和列

容器里面的水平区域称为"行"，垂直区域称为"列"。
单元格

行和列的交叉区域，称为"单元格"。
网格线

划分网格的线，称为"网格线"。水平网格线划分出行，垂直网格线划分出列。

GRID属性

容器属性:添加在容器元素

启动网格布局

display:grid;
/*属性值：grid  为块状网格容器 （容器自上而下排列）line-grid  为内联网格容器（容器横向排列）
*/

划分行和列

grid-template-columns:列数和列宽
grid-template-rows:行数和行高

属性值：绝对大小(根据列数或者行数确定值的个数) 例：200px 200px 200px
```
grid-template-columns:200px 200px 200px
grid-template-rows:200px 200px 200px
```
属性值：百分比（根据列数或者行数确定值的个数）例：33.33% 33.33% 33.33%
```
grid-template-columns:33.33% 33.33% 33.33%
grid-template-rows:33.33% 33.33% 33.33%
```

功能函数：repeat()

repeat(参数1，参数2)
/* 参数1 ： 重复的次数（列数）参数2 ： 重复的数值或者重复的模式（列宽）eg:grid-template-columns：repeat(3,33.33%);等同grid-template-columns:33.33% 33.33% 33.33%
*/

auto-fill关键字( 自动填充 )

grid-template-columns：repeat(auto-fill,33.33%);
/*当项目宽高固定，容器不固定的情况下，自动填充网格列数表示每列宽度为33.3%，然后自动填充，直到容器不能放置更多的列
*/

fr关键字(列宽片段)

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
```
grid-template-columns:1fr 3fr 1fr;
grid-template-rows:repeat(3,100px);
```

minmax() 功能函数

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
/*minmax(100px, 1fr)表示列宽不小于100px，不大于1fr
*/

auto 关键字自动填充

grid-template-columns:30px auto 20px;
grid-template-rows:repeat(3,100px);

网格线名称

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
/*
指定网格布局为3行x3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。
*/

设置行间距 || 列间距

grid-row-gap:20px  /* 行间距 */
grid-column-gap:20px /* 列间距 */
grid-gap:30px 30px   /* 复合式写法 *//*注：新版本已经省略 grid- 前缀    row-gap \  column-gap  \  gap*/

指定"区域"（9area），一个区域由单个或多个单元格组成。

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c''d e f''g h i';
这里单引号和双引号都可以。/*将整个网格容器分为9个区域，每个区域对应一个单元格通过grid-area 指定项目名称。【注】网格布局必须是横平竖直的划分区域，不能拐弯,d所在的内容区域是拐弯的。即grid-template-areas: 'a a a''d d b''d c c'; 'a a a''d e b''d c c';但这样可以正常显示，因为d没拐弯，是竖着的
*/

display:grid;
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);
grid-template-areas: 'a a a''. . b''. c c';

规划子元素放置的顺序（默认为先排行后排列）

grid-auto-flow: column | row;
/*row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
*/

设置单元格内容在单元格内水平 | 垂直的对齐方式

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items:  <justify-items>  <align-items> 先写垂直方向再写水平方向
/*复合式写法*/
/*start：对齐单元格的起始边缘。end：对齐单元格的结束边缘。center：单元格内部居中。stretch：拉伸，占满单元格的整个宽度（默认值）。
*/

设置整个内容区域在容器里面的水平 | 垂直对齐方式

justify-content:start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content:  <justify-content>  <align-content>   /* 复合式写法 *//*start - 对齐容器的起始边框。end - 对齐容器的结束边框。center - 容器内部居中。stretch - 项目大小没有指定时，拉伸占据整个网格容器。space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
*/

项目属性：添加在子元素上面

指定项目的四个边框，分别定位在哪根网格线。

grid-column-start
grid-column-end
grid-row-start
grid-row-end/*grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线grid-row-end属性：下边框所在的水平网格线
*/

grid-column-start:1;
grid-column-end:3;
grid-row-start: 2;
grid-row-end:4;

grid-column ， grid-row

grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
```
grid-column: 1 / 3;
grid-row: 1 / 2;
```

GRID（网格）布局相关推荐

CSS Grid 网格布局全解析
一.介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情 ...
CSS的Grid网格布局
Grid网格布局就是通过设置百分比,或者默认划分的单位个数,来达到宽度自适应的效果比如,页面控件的宽度,设置自适应随着显示器的宽度的增加而增加,网页永远占满整个屏幕 .searchContentR ...
CSS Grid网格布局全攻略
CSS Grid网格布局全攻略所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
CSS—— grid 网格布局
文章目录 1. grid 网格布局 1. grid 网格布局 display:grid grid 属性是以下属性的简写属性,默认: grid-gap , none,[200px]网格之间的距离 gri ...
《十二》CSS3 Grid 网格布局
网格布局将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作是一维布局.适用于一个方向上的布局. Grid布局则是将容 ...
CSS Grid 网格布局完整教程
前言一.概述二.基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线三.容器属性 3.1 display 属性 3.2 行与列属性定义明文定义百分比定义 repeat ...
轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...
CSS Grid网格布局详解
Grid 布局又称网格布局,是W3C提出的一个二维布局系统,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别.Flex 布局是轴线布局,只能指定" ...
grid网格布局。逆战班
grid网格布局是什么网格布局是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了.G ...
前端之css grid网格布局
grid网格布局一.创建 CSS 网格 1.说明 2.创建 CSS 网格二.添加网格结构(行和列) 1. 在父容器中设置列 2. 在父容器中设置行 3. 使用 CSS 网格单位设置列和行的大小三 ...