Gird(1)

目录

• 网格布局 grid(1)
  • 实现方式
  • 对容器设置的属性
    • 行高与列宽的设置
    • 单元格的间距
    • 内容的位置
    • 表格在容器的位置
  • 兼容问题

网格布局 grid(1)

实现方式

display:grid 也可成为行内元素 display:inline-grid

tip:设为网格布局之后，容器内的子元素的 float 、 display:inline-block/table-cell , vertical-align 和 column-*等
各项设置属性都将失效

对容器设置的属性

行高与列宽的设置

grid-template-columns 定义每一列的列宽
grid-template-rows 定义每一行的行高

.container{
    display:grid;
    grid-template-columns:  100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

grid中对属性赋提供了多种方式
上面能够使用33.3% , 33.3% , 33.3%
tip: 当重复的数值过多的时候还能够使用repeat()

repeat()

这个方法主要用于过多重复，简化代码使用
其接受两个参数

1. 第一个为重复的次数

2. 第二个为重复的值

.container{
    display:grid;
    grid-template-columns:  repeat(3,100px);/*repeat(3,33.3%)也是一种写法*/
    grid-template-rows: repeat(3,100px);
}

但repeat()并非只能够写重复的单个值，它也能够写成重复模式

例：

#contanner{
    display: grid;
    grid-template-columns:repeat(3,80px 20px 50px);
    grid-template-rows:90px;
}

auto-fill 关键字

有时单元格的大小是固定的，可是容器的大小不肯定。若是但愿每一列或者每一行容纳尽量多的单元格，这时能够使用auto-fill关键字表示自动填充。

auto-fit 关键字

与上面auto-fill相似，可是有不一样的地方(详见之后)

fr 关键字

为了方便表示比列，网格布局提供了fr关键字(fraction)的缩写

若是两列的宽度为1fr和2fr，就表示后者是前者的两倍

minmax()函数

函数产生一个长度范围，表示长度就在这个范围，接受两个参数 最小和最大

.container{
    width:200px;
    display:grid;
    grid-template-columns: 1fr 1fr minmax(100px , 1fr);
    grid-template-rows: repeat(3,100px);
}

auto 关键字

例:grid-template-columns: 50px auto 50px;

第二列的宽度基本上是等于该列单元格最大宽度，除非在单元格内容设置了min-width，且这个值大于最大宽度。

单元格的间距

grid-row-gap 设置行与行的间隔（行间距）
grid-column-gap 设置列与列的间隔（列间距）

grid-gap 简写 （前缀 grid- 可去）

gap: <grid-row-gap> <grid-column-gap>;
若是grid-gap 省略了第二个值，浏览器会默认第二个值会等于第一个值

内容的位置

justify-items属性设置单元格内容的水平位置(左中右)
align-items 属性设置单元格内容的垂直位置(上中下)

属性以下：

1. start:对齐单元格的起始边缘

2. end:对齐单元格的结束边缘

3. center：单元格内部居中

4. stretch:拉伸、占满单元格的整个宽度(默认值)

place-items为简写

place-items : <align-items> <jsutify-items>

表格在容器的位置

justify-content 属性是整个内容区域在容器里面的水平位置(左中右)
align-content 属性是整个内容区域的垂直位置(上中下)

属性以下：

1. start:对齐容器的起始边框

2. end:对齐容器的结束边框

3. center：容器内部居中

4. stretch:项目大小没有指定时，；拉伸占据整个网格容器。

5. space-around:每一个项目两侧的间隔相等，因此，项目之间的间隔比项目与容器边框的间隔大一倍

6. space-bewteen: 项目与项目的间隔相等，项目与容器边框之间没有间隔

7. space-evenly: 项目与项目之间的间隔相等，项目与容器边框之间也是同长度的间隔

place-content 简写

place-content : <align-content> <justify-content>

grid-auto-columns/rows

有时，一些项目的指定位置，在现有网格的外部，好比网格只有三列，可是某一个项目指定在第五行。这时，浏览器会自动生成多余的网格，以便放置项目

打开示例代码

```css #container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-auto-rows: 50px; } .item { font-size: 2em; text-align: center; border: 1px solid #e5e4e9; } .item-1 { background-color: #ef342a; } .item-2 { background-color: #f68f26; } .item-3 { background-color: #4ba946; } .item-4 { background-color: #0376c2; } .item-5 { background-color: #c077af; } .item-6 { background-color: #f8d29d; } .item-7 { background-color: #b5a87f; } .item-8 { background-color: #d0e4a9; grid-row-start: 4; grid-column-start: 2; } .item-9 { background-color: #4dc7ec; grid-row-start: 5; grid-column-start: 3; } ```

上面对grid-auto-columns/rows的赋值，那些值表明着网格线，columns是从左到右的算起，rows是从上到下算起(详细请看);

兼容问题

目前各大浏览器已经能够有效的支持grid属性，可是这个属性对于低版本浏览器不支持，对于IE浏览器不支持，可是目前的IE Edge新版也是能够支持这项属性。

下图为各大浏览器支持状况：

本文参考http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html