search

博客列表 >【CSS】布局技术二：grid 布局（二维）总结

【CSS】布局技术二：grid 布局（二维）总结

可乐随笔
可乐随笔原创
2022年11月27日 20:21:38557浏览

布局技术二：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>
上一条：微信在线答疑小程序开发功能设计方案下一条：【CSS】布局技术一：Flex 布局技术(一维)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多