html图⽚⽂字⽹格布局,【图⽚版】CSS⽹格布局（Grid）完全
教程
## 简⾔
CSS⽹格布局(Grid)是⼀套⼆维的页⾯布局系统，它的出现将完全颠覆页⾯布局的传统⽅式。传统的CSS页⾯布局 ⼀直不够理想。包括table布局、浮动、定位及内联块等⽅式，从本质上都是Hack的⽅式，并且遗漏了⼀些重要的功能(⽐如：垂直居中)。Flexbox的出现部分解决了上述问题，但Flex布局是为了解决简单的⼀维布局，适⽤于页⾯局部布局。⽽Grid天然就是为了解决复杂的⼆维布局⽽出现的，适⽤页⾯的整体布局。在实际⼯作中，Grid和Flexbox不但不⽭盾，⽽且还能很好的结合使⽤。做为WEB程序员，我们在页⾯布局问题上都付出过努⼒，也将不断探索新的⽅案。⽽Grid是第⼀个专门为布局问题⽽⽣的CSS模块，我们有理由对Grid充满期待。
本⽂包括18个⼩节，62个实例，完整阅读需要时间20分钟以上。
为了获得最佳的阅体验，可以访问如下格式的教程：
## 1 ⽹格容器
将属性 `display` 值设为 `grid` 或 `inline-grid` 就创建了⼀个⽹格容器，所有容器直接⼦结点⾃动成为⽹格项⽬。
### 1.1 例1
```css
grid {
display: grid;
｝
```
⽹格项⽬按⾏排列，⽹格项⽬占⽤整个容器的宽度。
### 1.1 例2
```css
grid {
display: inline-grid;
｝
```
⽹格项⽬按⾏排列，⽹格项⽬宽度由⾃⾝宽度决定。
## 2 显⽰⽹格
属性`grid-template-rows`和`grid-template-columns`⽤于显⽰定义⽹格，分别⽤于定义⾏轨道和列轨道。
### 2.1 例3
```css
grid {
display: grid;
grid-template-rows: 50px 100px；
｝
```
属性`grid-template-rows`⽤于定义⾏的尺⼨，即轨道尺⼨。轨道尺⼨可以是任何⾮负的长度值(px，%，em，等)
⽹格项⽬1的⾏⾼是50px，⽹格项⽬2的⾏⾼是100px。
因为只定义了两个⾏⾼，⽹格项⽬3和4的⾏⾼取决于其本⾝的⾼度。
### 2.2 例4
```css
grid {
display: grid;
grid-template-columns: 90px 50px 120px；
｝
```
类似于⾏的定义，属性`grid-template-columns`⽤于定义列的尺⼨。
因为定义中只有三列，所以项⽬4，5，6排在新的⼀⾏; 并因为它们位于第1，2，3列的轨道上，所以其宽度等于定义中第1，2，3列轨道的宽度。
⽹格项⽬的第1列，第2列，第3列的宽度分别是 90px, 50px 和 120px 。
### 2.3 例5
```css
grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr；
｝
```
单位`fr`⽤于表⽰轨道尺⼨配额，表⽰按配额⽐例分配可⽤空间。
本例中，项⽬1占 1/4 宽度，项⽬2占 1/4 宽度，项⽬3占 1/2 宽度。
### 2.4 例6
```css
grid {
display: grid;
grid-template-columns: 3rem 25% 1fr 2fr；
｝
```
单位`fr`和其它长度单位混合使⽤时，`fr`的计算基于其它单位分配后的剩余空间。
本例中，`1fr = (容器宽度 - 3rem - 容器宽度的25%) / 3`
## 3 轨道的最⼩最⼤尺⼨设置
函数`minmax()`⽤于定义轨道最⼩/最⼤边界值。
### 3.1 例7
```css
grid {
display: grid;
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
｝
```
函数`minmax()`接收两个参数：第⼀个参数表⽰最⼩轨道尺⼨，第⼆个参数表⽰最⼤轨道尺⼨。长度值可以是auto，表⽰轨道尺⼨可以根据内容⼤⼩进⾏伸长或收缩。
本例中，第⼀⾏最⼩⾼度设置成100px，但是最⼤⾼度设置成`auto`，表⽰⾏⾼可以根据内容伸长超过100px。
本例中，第⼀列宽度的最⼤值设置成50%，表⽰其宽度不能超过整个容器宽度的50%。
## 4 重复的⽹格轨道
函数`repeat()`⽤来定义重复的⽹格轨道，尤其适⽤于有多个相同项⽬的情况下。
### 4.1 例8
```css
grid {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
｝
```
函数`repeat()`接收两个参数：第⼀个参数表⽰重复的次数，第⼆个参数表⽰轨道尺⼨。
### 4.2 例9
```css
grid {
display: grid;
html的flex布局grid-template-columns: 30px repeat(3, 1fr) 30px;
｝
```
函数`repeat()`可以⽤在轨道定义列表当中。
本例中，第1列和第5列的宽度是30px。函数`repeat()`创建了中间3列，每⼀列宽度都是`1fr`。
## 5 定义⽹格间隙
属性`grid-column-gap` 和 `grid-row-gap`⽤于定义⽹格间隙。
⽹格间隙只创建在⾏列之间，项⽬与边界之间⽆间隙。
### 5.1 例10
```css
grid {
display: grid;
grid-row-gap: 20px;
grid-column-gap: 5rem;
｝
```
间隙尺⼨可以是任何⾮负的长度值(px，%，em等)。
### 5.2 例11
```css
grid {
display: grid;
grid-gap: 100px 1em;
｝
```
属性`grid-gap`是`grid-row-gap`和`grid-column-gap`的简写形式。
第⼀个值表⽰⾏间隙，第⼆个值表⽰列间隙。
### 5.3 例12
```css
grid {
display: grid;
grid-gap: 2rem;
｝
```
如只有⼀个值，则其即表⽰⾏间隙，也表⽰列间隙。
## 6 ⽤⽹格线编号定位项⽬
⽹格线本质上是⽤来表⽰⽹格轨道的开始和结束。
每⼀条⽹格线编号都以1开始，以1为步长向前编号，其中包括⾏列两组⽹格线。### 6.1 例13
```css
.
item1 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}
```
这是⼀个3⾏2列的⽹格，即在⾏上有4条⽹格线，在列上有3条⽹格线。项⽬1利⽤⽹格线编号定位在第2⾏第2列的位置上。
本例中，项⽬只跨越⼀⾏⼀列，则`grid-row-end`和`grid-column-end`的定义可以省略。
### 6.2 例14
```css
.item1 {
grid-row: 2;
grid-column: 3 / 4;
}
```
属性`grid-row` 是 `grid-row-start` 和 `grid-row-end`的简写形式。
属性`grid-column` 是 `grid-column-start` 和 `grid-column-end`的简写形式。
如果只指定⼀个值，它表⽰ `grid-row/column-start`。
如果两个值都指定，第⼀个表⽰ `grid-row/column-start` ，第⼆个值表⽰`grid-row/column-end`。⽽且你必须⽤斜杠(/)分隔这两个值。
### 6.3 例15
```css
.item1 {
grid-area: 2 / 2 / 3 / 3;
}
```
属性`grid-area` 是 `grid-row-start`, `grid-column-start`, `grid-row-end` 和 `grid-column-end`的简写形式。
如果四个值都指定，则第⼀个表⽰ `grid-row-start`, 第⼆个表⽰ `grid-column-start`, 第三个表⽰ `grid-row-end` ，第四个表⽰ `grid-column-end`。
## 7 ⽹格项⽬跨越⾏列
⽹格项⽬默认都占⽤⼀⾏和⼀列，但可以使⽤前⼀节中定位项⽬的属性来指定项⽬跨越多⾏或多列。
### 7.1 例16
```css
.item1 {
grid-column-start: 1;
grid-column-end: 4;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。