Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid网格布局基础篇：grid常用属性网格布局
Blogger Information
Blog 41
fans 0
comment 0
visits 40996
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
grid网格布局基础篇：grid常用属性网格布局
幸福敲门的博客
Original
1241 people have browsed it

一、Grid网格布局概述

Grid网格布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid布局远比 Flex 布局强大。Grid网格布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid布局远比 Flex 布局强大
Grid 网格布局

二、Grid网格布局基本概念

1.采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）。
注意：项目只能是容器的顶层子元素，不包含项目的子元素，Grid 布局只对项目生效。
2.容器里面的水平区域称为”行”（row），垂直区域称为”列”（column）。
行和列的交叉区域，称为”单元格”（cell）。
3.正常情况下，n行和m列会产生n x m个单元格。
4.划分网格的线，称为”网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

网格线
上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

三、grid属性值

序号 属性值 说明
1 grid-template-columns 轨道列宽
2 grid-template-rows 轨道行高
3 gap 轨道间距
4 grid-auto-flow 隐式轨道排列方式，默认行优先
5 grid-auto-rows 隐式轨道行高
6 grid-auto-columns 隐式轨道列宽

grid项目属性

属性 描述
grid-area 网格定位

实例

  1. <!DOCTYPE  html>
  2. <html  lang="en">
  3. <head>
  4.      <meta charset="utf-8">
  5.      <meta name="viewport"  content="width=device-width,initial-scale=1.0">
  6.      <title>grid3行4列布局演示</title>
  7.      <style>
  8.      * {
  9.     margin: 0;
  10.     padding: 0;
  11.     box-sizing: border-box;
  12. }
  13. /* grid容器属性 */
  14. .container {
  15.     width: 25em;
  16.     margin: 1em auto;
  17.     /* 转换为grid网格容器 */
  18.     display: grid;
  19.     /* 设置3行4列布局 */
  20.     grid-template-rows: 1fr 1fr 1fr;
  21.     grid-template-columns: 1fr 1fr 1fr 1fr;
  22. }
  23. /* grid容器项目 */
  24. .container .item {
  25.     background-color: red;
  26.     border: 2px solid #8B4513;
  27.     padding: .3em;
  28.     margin: .6em;
  29. }
  30.   </style>
  31. </head>
  32. <body>
  33.     <div class="container">
  34.     <span class="item">item1</span>
  35.     <span class="item">item2</span>
  36.     <span class="item">item3</span>
  37.     <span class="item">item4</span>
  38.     <span class="item">item5</span>
  39.     <span class="item">item6</span>
  40.      <span class="item">item7</span>
  41.     <span class="item">item8</span>
  42.     <span class="item">item9</span>
  43.     <span class="item">item10</span>
  44.     <span class="item">item11</span>
  45.     <span class="item">item12</span>   
  46.  </div>
  47. </body>
  48. </html>

图示：
grid3行4列布局

根据这个布局代码可以分别改变 grid-template-rows| 轨道行高 

  1. .container {
  2.       /* 默认值 */
  3.       grid-template-rows: auto;
  4.      /* 轨道行高第1行10em 第2行8em 第3行6em*/
  5.     grid-template-rows: 10em 8em 6em;
  6. }

图示：
grid-template-rows| 轨道行高

改变grid-template-columns|轨道列宽

  1. .container {
  2.          /* 第1列的列宽5em，第二行的列宽6em， 第二行的行高7em 第二行的行高8em*/
  3.     grid-template-columns: 8em 7em 6em 5em;
  4. }

图示：
grid-template-columns|轨道列宽

改变gap轨道间距 

  1. /* gap | 轨道间距 */
  2.   .container {
  3.       /* 行间距0.5em，列间距1em */
  4.       gap: .5em 1em;
  5.   }

图示：
改变gap轨道间距

grid-auto-flow隐式轨道排列方式
.container 内最后一个子元素后 span.item{item$@12}*3 额外添加 2 个元素，body标签中为

  1. <div class="container">
  2.     <span class="item">item1</span>
  3.     <span class="item">item2</span>
  4.     <span class="item">item3</span>
  5.     <span class="item">item4</span>
  6.     <span class="item">item5</span>
  7.     <span class="item">item6</span>
  8.     <span class="item">item7</span>
  9.     <span class="item">item8</span>
  10.     <span class="item">item9</span>
  11.   <span class="item">item10</span>
  12.     <span class="item">item11</span>
  13.     <span class="item">item12</span>
  14.     <span class="item">item13</span>
  15.     <span class="item">item14</span>
  16. </div>

原先的 3 行4 列之外额外增加的 item13~item14 自动生成到网格中的项目为隐式轨道
style标签中继续添加样式

  1. /* grid-auto-flow | 隐式轨道排列方式 */
  2. .container .item:nth-of-type(12)~* {
  3.     /* 最后添加的三个项目更改背景色 */
  4.     background-color: Blue;
  5. }
  6. .container {
  7.     /* 先行后列，默认行优先 */
  8.     grid-auto-flow: row;
  9.     /* 列优先排列 */
  10.     grid-auto-flow: column;
  11. }

图示：
隐式轨道排列方式

grid-auto-rows隐式轨道行高

  1. /* grid-auto-rows | 隐式轨道行高 */
  2. .container {
  3.     /* 改回行优先 */
  4.     grid-auto-flow: row;
  5.     /* 设置隐式轨道，最后添加的13、14行高自动默认值 */
  6.     grid-auto-rows: auto;
  7.     grid-auto-rows: 1fr;
  8.     /* 设置隐式轨道，最后添加的13、14行高5em */
  9.     grid-auto-rows: 5em;
  10. }

图示：
隐式轨道行高

grid-auto-columns隐式轨道列宽

  1. /* grid-auto-columns | 隐式轨道列宽 */
  2. .container {
  3.     /* 改为列优先 */
  4.     grid-auto-flow: column;
  5.     /* 设置隐式轨道，最后添加的13、14列宽自动默认值 */
  6.     grid-auto-columns: auto;
  7.     grid-auto-columns: 1fr;
  8.     /* 设置隐式轨道，最后添加的13、14列宽5em */
  9.     grid-auto-columns: 5em;
  10. }

图示：
grid-auto-columns隐式轨道列宽

grid项目属性实例演示

grid-area | 网格定位

  1. /* grid-area | 网格定位 */
  2. .container .item:nth-of-type(13) {
  3.     /* 将项目13移到第1行第3列位置，再跨三行 */
  4.     grid-area: 1/2/span 2;
  5. }

图示：
grid-area | 网格定位

四、网格单元尺寸的新单位：fr相关常识

  1. fr和其它单位有什么区别？
    1.1 fr与auto的区别
    fr可以设置比例，auto无法设置
    1.2 fr和%的区别
    用%单位，它不将轨道间距计算在内，所以会超出容器
    fr和%可以共存，计算方式：总宽度减去%宽度，将剩下的全部分给fr
    auto,fr,%都是相对单位，都可以触发自动计算机制，尽可能不要同时使用
    1.3 fr与其它单位混合，如em，px
    px,em是固定的，计算时要先减去固定值 ，将剩下的空间在fr之间分配
    1.4 fr尽可能不要和auto同时使用
    会压缩auto空间
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post