简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 【CSS】布局技术二：grid 布局（二维）总结
Blogger Information
Blog 94
fans 0
comment 0
visits 92421
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
【CSS】布局技术二：grid 布局（二维）总结
可乐随笔
Original
556 people have browsed it

布局技术二：grid 布局（二维）

Grid 术语

(一) 容器属性

  1. display: 容器类型（块或行内）
  2. grid-template-row/columns：创建显示网格
  3. grid-auto-rows/columns: 创建隐式网格
  4. grid-auto-flow: 项目排列方向
  5. gap: 行列间隙
  6. place-content: 项目在容器中的排列方式
  7. place-items: 项目在单元格中的排列试工

（二）项目属性

  1. grid-row/column: 某项目占据的网格区域
  2. grid-area: grid-row/column语法糖
  3. place-self: 某项目在单元格中的排列方式

显式风格与项目属性

  1. 布局技术: Grid: display: grid;
  2. 显式网格
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr); */
    grid-template-rows: repeat(3,50px);
  3. 排列规则
    grid-auto-flow: column;
    grid-auto-flow: row;
  4. 布局属性：grid-area
    重点
    span 简化：行开始/列开始/跨越行/跨越列;
    grid-area: 1 / 1 / span 2 / span 2;

排列规则与隐式网格

  1. 排列规则：grid-auto-flow:row / column 行优先/列优先
  2. 隐式网格：grid-auto-row / column 多除隐式网格自定义高和度

Grid项目之对齐方式

  1. 对齐方式：必须存在“剩余空间”
  2. 对齐方案：“剩余空间”在“项目”之间的分配方式
  3. 剩余空间：Flex(主轴，交叉轴)，Grid(容器，单元格)
  4. Grid:剩余空间存在于“容器”或“单元格”
  5. 容器中：place-content,place-items
  6. 项目中：place-self

Grid项目之行列间隙

行列间隙
gap: 垂直方向 水平方向
gap: 5px 5px;
项目间隙 5PX
gap: 5px;

更多：参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid

示例代码

1:grid属性-1：显式风格与项目属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>grid属性-1：显式风格与项目属性</title>
  8. </head>
  9. <body>
  10.     <!-- 容器：父元素 -->
  11.     <div class="container">
  12.         <!-- 项目：子元素 -->
  13.         <div class="item">item1</div>
  14.     </div>
  16.     <style>
  17.         .container {
  18.             /* grid布局 */
  19.             display: grid;
  20.             width: 300px;
  21.             height: 150px;
  23.             /* 3行3列 */
  24.             /* grid-template-columns: 100px 100px 100px;
  25.             grid-template-rows: 50px 50px 50px; */
  27.             /* grid-template-columns: repeat(3,100px);
  28.             grid-template-rows: repeat(3,50px); */
  30.             /* 容器300px,而每个项目100px，有3个项目正好充满容器，1:1:1 */
  31.             grid-template-columns: repeat(3,1fr);
  32.             grid-template-rows: repeat(3,1fr);
  33.         }
  34.         .container > .item {
  35.             background-color: wheat;
  36.         }
  37.         /* 可以将项目放在任何一个单元格中 */
  38.         .container > .item:first-of-type {
  39.             /* 默认：1行1列到2行2列 */
  40.             /* grid-row: 起始行 / 结束行； */
  41.             /* grid-column：起始列 / 结束列； */
  42.             grid-row: 1 / 2;
  43.             grid-column: 1 /2;
  45.             /* 移动到正中间 */
  46.             grid-row: 2 / 3;
  47.             grid-column: 2 / 3;
  49.             /* 因为一个项目至少要占据一个单元格，默认跨越一个单元格编号 */
  50.             grid-row: 2;
  51.             grid-column: 2;
  53.             /* 很多场景下，用户不关心也不知道结束编号，只知道要跨越几行几列 */
  54.             grid-row: 2 / span 1; 
  55.             grid-column: 2 / span 1;
  57.             /* 从当前位置开始，跨越2行2列 */
  58.             grid-row: 2 / span 2;
  59.             grid-column: 2 / span 2;
  61.             /* grid-row,grid-column 创建出了一个网格区域 */
  62.             /* grid-area: 行开始/列开始/行结束/列结束; */
  63.             grid-area: 1 / 1 / 3 / 3;
  64.             /* span 简化 */
  65.             grid-area: 1 / 1 / span 2 / span 2;
  67.             /* 页脚 布局 */
  68.             grid-area: 3 / 1 / span 1 / span 3; 
  70.         }
  72.     </style>
  73. </body>
  74. </html>

示例代码2:Grid属性-2：排列规则与隐式网格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Grid属性-2：排列规则与隐式网格</title>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="item">item1</div>
  12.         <div class="item">item2</div>
  13.         <div class="item">item3</div>
  14.         <div class="item">item4</div>
  15.         <div class="item">item5</div>
  16.         <div class="item">item6</div>
  17.         <div class="item">item7</div>
  18.         <div class="item">item8</div>
  19.         <div class="item">item9</div>
  20.         <div class="item">item11</div>
  21.         <div class="item">item12</div>
  22.     </div>
  23.     <style>
  24.         .container {
  25.             width: 300px;
  26.             /* height: 150px; */
  28.             /* 布局技术: Grid */
  29.             display: grid;
  30.             /* 显式网格 */
  31.             grid-template-columns: repeat(3,1fr);
  32.             /* grid-template-rows: repeat(3,1fr); */
  33.             grid-template-rows: repeat(3,50px);
  35.             /* 排列规则 */
  36.             grid-auto-flow: column;
  37.             grid-auto-flow: row;
  39.             /* 隐式网格 */
  40.             /* 多余的项目，出现在隐式网格中（自动生成） */
  41.             /* 自定义隐式网格高度 */
  42.             grid-auto-rows: 50px;
  43.             /* 共享高度，与显式网络高度一致 */
  44.             /* grid-auto-rows: 1fr; */
  46.         }
  47.         .container > .item {
  48.             background-color: wheat;
  49.         }
  50.         .container > .item:nth-last-child(-n+2){
  51.             background-color: yellow;
  52.         }
  53.     </style>
  54. </body>
  55. </html>

示例代码3:Grid之项目对齐

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Grid属性3：项目对齐</title>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="item">item1</div>
  12.         <div class="item">item2</div>
  13.         <div class="item">item3</div>
  14.         <div class="item">item4</div>
  15.         <div class="item">item5</div>
  16.         <div class="item">item6</div>
  17.         <div class="item">item7</div>
  18.         <div class="item">item8</div>
  19.         <div class="item">item9</div>
  20.     </div>
  22.     <style>
  23.         /**------------------------------------------------------------------------
  24.          * * 1. 对齐方式：必须存在“剩余空间”
  25.          * * 2. 对齐方案：“剩余空间”在“项目”之间的分配方式
  26.          * * 3. 剩余空间：Flex(主轴，交叉轴)，Grid(容器，单元格)
  27.          * * Grid:剩余空间存在于“容器”或“单元格”
  28.          * * 容器中：place-content,place-items
  29.          * * 项目中：place-self
  30.          *------------------------------------------------------------------------**/
  31.         .container {
  32.             display: grid;
  33.             grid-template-columns: repeat(3,100px);
  34.             grid-template-rows: repeat(3,100px);
  35.         }
  36.         .container .item {
  37.             background-color: wheat;
  38.         }
  40.         /* 创建容器剩余空间 */
  41.         .container {
  42.             width: 450px;
  43.             height: 450px;
  44.             border: 1px solid #000;
  45.             background-color: lightgreen;
  47.             /* 1. 项目在“容器”中的对齐 */
  48.             /* 默认值：垂直居上，水平居左 */
  49.             place-content: start start;
  50.             /* 垂直居中，水平居右 end <==> right */ 
  51.             place-content: center end;
  52.             /* 全部居中 */
  53.             place-content: center;
  55.             /* 水平方向居中对齐，垂直方向分散对齐 */
  56.             place-content: space-between space-around;
  58.             /* 2. 项目在单元格中对齐 */
  59.             /* 单元格中必须要有剩余控件，即：项目 < 单元格 */
  60.             /* place-tiems:垂直方向 水平方向 */
  61.             /* 默认值：place-items: start strat; */
  62.             place-items: start start;
  63.             /* 垂直居中 水平居右对齐 */
  64.             place-items:center end;
  65.             /* 垂直水平居中 */
  66.             place-items: center;
  68.             }
  70.             /* 3. 设置某个项目在单元格中对齐方式不同 */
  71.             .container .item:nth-child(5) {
  72.               background-color: yellow;
  73.               place-self: end;
  75.         }
  76.     </style>
  77. </body>
  78. </html>

Grid属性4：行列间隙

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Grid属性4：行列间隙</title>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="item">item1</div>
  12.         <div class="item">item2</div>
  13.         <div class="item">item3</div>
  14.         <div class="item">item4</div>
  15.         <div class="item">item5</div>
  16.         <div class="item">item6</div>
  17.         <div class="item">item7</div>
  18.         <div class="item">item8</div>
  19.         <div class="item">item9</div>
  20.     </div>
  22.     <style>
  24.         .container {
  25.             display: grid;
  26.             grid-template-columns: repeat(3,100px);
  27.             grid-template-rows: repeat(3,100px);
  29.             /* 行列间隙 */
  30.             /* gap: 垂直方向  水平方向  */
  31.             gap: 5px 5px;
  32.             /* 项目间隙 5PX */
  33.             gap: 5px;
  34.         }
  35.         .container .item {
  36.             background-color: wheat;
  37.         }
  39.     </style>
  40. </body>
  41. </html>
Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！