search

博客列表 >圣怀布局,网格(容器,项目,单元,轨道,间距,排列,位置,对齐),隐式轨道,fr,repeat,minmax,命名式的网格,栅格布局组件

圣怀布局,网格(容器,项目,单元,轨道,间距,排列,位置,对齐),隐式轨道,fr,repeat,minmax,命名式的网格,栅格布局组件

豌豆君
豌豆君原创
2021年03月22日 12:22:21655浏览

grid快速实现”圣怀布局 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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快速实现"圣怀布局"</title>
  8.     <style>
  9.         /* 圣怀布局：grid实现，二边固定，中间自适应，主体优先渲染 */
  10.         body * {
  11.             border: 1px solid #000;
  12.         }
  13.         body {
  14.             display: grid;
  15.             grid-template-columns: 15em minmax(50vw,auto) 15em;
  16.             grid-template-rows: 3em minmax(80vh,auto) 3em;
  17.             gap: 0.5em;
  18.         }
  19.         header,footer {
  20.             grid-area: span 1 / span 3;
  21.         }
  22.         main {
  23.             grid-area: 2 /2;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <!-- 圣怀布局要求主体区优先显示，根据浏览器渲染顺序，主体应该写到前面去。 -->
  29.     <header>header</header>
  31.     <!-- 主体main应该优先渲染 -->
  32.     <main>main</main>
  33.     <aside class="left">left</aside>
  34.     <aside class="right">right</aside>
  36.     <footer>footer</footer>
  37. </body>
  38. </html>

网格容器/网格项目/网格单元/网格轨道/轨道间距 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>网格容器/网格项目/网格单元/网格轨道/轨道间距</title>
  8.     <style>
  9.         /* 1.网格容器：由若干个矩形网格单元构成
  10.         2.网格项目：网格容器的子元素，必须放在网格单元中
  11.         3.网格单元：有"单元格"和"网格区域"二种表现形式
  12.         4.网格轨道：由多个网格单元组成，根据排列方向有"行轨"和"列轨"之分
  13.         5.轨道间距：容器中轨道之间的间距，有"行轨间距"和"列轨间距" */
  15.         /* 网格容器 */
  16.         .container {
  17.             border: 1px solid #000;
  18.             padding: 0.5em;
  19.             /* flex中子元素默认为行内(inline)元素，grid中子元素默认为块(block)元素 */
  20.             display: grid;
  22.             /* 1.设置轨道的列宽 */
  23.             /* 设置一个3列2行的布局空间 */
  24.             grid-template-columns: auto;
  25.             grid-template-columns: 10em 10em 10em;
  27.             /* 2.设置轨道的行高 */
  28.             grid-template-rows: auto;
  29.             grid-template-rows: 5em 5em;
  31.             /* 3.设置轨道的间距 */
  32.             /* gap: 水平 垂直 */
  33.             gap: 0.5em 1em;
  34.             gap: 0.5em 0.5em;
  35.             /* gap: 0.5em 0.5em;可简写gap: 0.5em; */
  36.             gap: 0.5em;
  37.         }
  38.         /* 网格项目：网格容器中的"子元素"（不能是孙元素），与flex是一样的 */
  39.         .container > .item {
  40.             /* 默认生成一列N行的容器（N就是项目的数量） */
  41.             background-color: lightgray;
  42.             border: 1px solid #000;
  43.             padding: 0.5em;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="container">
  49.         <span class="item">item1</span>
  50.         <span class="item">item2</span>
  51.         <span class="item">item3</span>
  52.         <span class="item">item4</span>
  53.         <span class="item">item5</span>
  54.         <span class="item">item6</span>
  55.     </div>
  56. </body>
  57. </html>

设置网格单元尺寸的新单位：fr 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>设置网格单元尺寸的新单位：fr</title>
  8.     <style>
  9.         /* 网格容器 */
  10.         .container {
  11.             border: 1px solid #000;
  12.             padding: 0.5em;
  13.             display: grid;
  15.             /* 一.设置轨道的列宽 */
  16.             grid-template-columns: 10em 10em 10em;
  17.             /* 设置轨道宽度时可以使用一个新的单位：fr(fraction),类似flex中的伸缩因子 */
  18.             grid-template-columns: auto auto auto;
  20.             /* 1. fr 与 auto 之间的区别 */
  21.             /* 新需求：中间一列的宽度是二边的二倍 */
  22.             /* 此时 auto 完全失灵 */
  23.             grid-template-columns: 1fr 2fr 1fr;
  25.             /* 2.fr 与 % 的区别 */
  26.             /* 新需求：中间一列是左右的三倍 */
  27.             /* % 不能识别轨道的间距所以用%时注意 */
  28.             /* % 与 fr 可以共存，计算方式，总宽度减去百分比的宽度，将剩下的全部分给fr */
  29.             /* auto, fr, % 都是相对单位，都可以触发自动计算机制，尽可能不要同时出现 */
  30.             grid-template-columns: 1fr 3fr 1fr;
  31.             grid-template-columns: 20% 60% 20%;
  32.             grid-template-columns: 20% 1fr 20%;
  34.             /* 3. fr 与其它单位混合，如 em, px  */
  35.             /* px 是固定的，em是固定， 计算时要减去这些固定值，将剩下的空间在fr之间分配 */
  36.             /* 总宽度 -8em - 200px, 将剩下的空间在第2列与第3列之间分配（但是自动计算的值可能会被最小值限制） */
  37.             grid-template-columns: 8em 1fr 2fr 200px;
  40.             /* 4. fr 尽可能不要与auto同时使用 */
  41.             /* auto 与 px , em ,会自动计算 */
  42.             /* 与 auto 相邻的不是em, rem, %, 而是fr 那auto会被压缩到内容区 */
  43.             grid-template-columns: 30% auto 10em;
  44.             grid-template-columns: 1fr auto 1fr;
  46.             /* 二.设置轨道的行高 */
  47.             grid-template-rows: 5em 5em;
  49.             /* 三.设置轨道的间距 */
  50.             gap: 0.5em;
  51.         }
  52.         /* 网格项目*/
  53.         .container > .item {
  54.             background-color: lightgray;
  55.             border: 1px solid #000;
  56.             padding: 0.5em;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <div class="container">
  62.         <span class="item">item1</span>
  63.         <span class="item">item2</span>
  64.         <span class="item">item3</span>
  65.         <span class="item">item4</span>
  66.         <span class="item">item5</span>
  67.         <span class="item">item6</span>
  68.     </div>
  69. </body>
  70. </html>

设置网格单元尺寸的常用函数：repeat(),minmax() 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>设置网格单元尺寸的常用函数：repeat(),minmax()</title>
  8.     <style>
  9.         /* 网格容器 */
  10.         .container {
  11.             border: 1px solid #000;
  12.             padding: 0.5em;
  13.             display: grid;
  15.             /* 一.设置轨道的列宽 */
  16.             grid-template-columns: 10em 10em 10em;
  17.             /* 1.repeat() */
  18.             /* 第二个参数可以是多个值用空格隔开 */
  19.             grid-template-columns: repeat(3,10em);
  20.             grid-template-columns: repeat(3,10em 2em);
  21.             grid-template-columns: repeat(3,1fr 2fr);
  22.             /* 展开 */
  23.             grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
  24.             /* 混合使用 */
  25.             grid-template-columns: repeat(2,1fr) 2fr;
  26.             /* 展开 */
  27.             grid-template-columns: 1fr 1fr 2fr;
  29.             /* 2.minmax() */
  30.             /* 中间列，最小宽度是20em，最大宽高是左右的2倍 */
  31.             grid-template-columns: 1fr minmax(20em,2fr) 1fr;
  32.             grid-template-columns: 20em minmax(20em,1fr);
  33.             grid-template-columns: 20em minmax(20em,auto);
  35.             /* 二.设置轨道的行高 */
  36.             grid-template-rows: 5em 5em;
  38.             /* 三.设置轨道的间距 */
  39.             gap: 0.5em;
  40.         }
  41.         /* 网格项目*/
  42.         .container > .item {
  43.             background-color: lightgray;
  44.             border: 1px solid #000;
  45.             padding: 0.5em;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class="container">
  51.         <span class="item">item1</span>
  52.         <span class="item">item2</span>
  53.         <span class="item">item3</span>
  54.         <span class="item">item4</span>
  55.         <span class="item">item5</span>
  56.         <span class="item">item6</span>
  57.     </div>
  58. </body>
  59. </html>

网格单的排列方式与隐式轨道 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>网格单的排列方式与隐式轨道</title>
  8.     <style>
  9.         /* 1.排列方式：grid-auto-flow
  10.         2.隐式轨道的行高：grid-auto-rows
  11.         3.隐式轨道的列宽：grid-auto-columns */
  13.         /* 网格容器 */
  14.         .container {
  15.             border: 1px solid #000;
  16.             padding: 0.5em;
  17.             display: grid;
  19.             /* 一.设置轨道的列宽 */
  20.             grid-template-columns: repeat(3,1fr);
  22.             /* 二.设置轨道的行高 */
  23.             grid-template-rows: 5em 5em;
  24.             /* 此时声明的网格单元数量已经不够存入所有的网格项目了 */
  25.             /* 此时，多出的三个项目会自动放入到自动生成的网格空间中了 */
  26.             /* 这时，原来声明的网格单元叫：显式轨道 
  27.             新项目显示的轨道称为：隐式轨道 */
  29.             /* 此时，默认项目在容器中按：先行后列的顺序排列，也叫"行优先" */
  30.             grid-auto-flow: row;
  31.             /* 自动生成的隐式轨道的高度是自动的 */
  32.             /* 行优先时要设置隐式轨道的行高 */
  33.             /* grid-auto-rows: 5em; */
  35.             /* 列优先 */
  36.             grid-auto-flow: column;
  37.             /* 列优先时要设置的隐式轨道的列宽 */
  38.             grid-auto-columns: 1fr;
  41.             /* 三.设置轨道的间距 */
  42.             gap: 0.5em;
  43.         }
  44.         /* 网格项目*/
  45.         .container > .item {
  46.             background-color: lightgray;
  47.             border: 1px solid #000;
  48.             padding: 0.5em;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <div class="container">
  54.         <span class="item">item1</span>
  55.         <span class="item">item2</span>
  56.         <span class="item">item3</span>
  57.         <span class="item">item4</span>
  58.         <span class="item">item5</span>
  59.         <span class="item">item6</span>
  60.         <span class="item">item7</span>
  61.         <span class="item">item8</span>
  62.         <span class="item">item9</span>
  63.     </div>
  64. </body>
  65. </html>

自定义项目在容器的显示位置 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>自定义项目在容器的显示位置</title>
  8.     <style>
  10.         /* 网格容器 */
  11.         .container {
  12.             border: 1px solid #000;
  13.             padding: 0.5em;
  14.             display: grid;
  16.             /* 一.设置轨道的列宽 */
  17.             grid-template-columns: repeat(3,1fr);
  19.             /* 二.设置轨道的行高 */
  20.             grid-template-rows: 5em 5em;
  21.             /* 行优先时要设置隐式轨道的行高 */
  22.             grid-auto-rows: 5em;
  24.             /* 三.设置轨道的间距 */
  25.             gap: 0.5em;
  26.         }
  28.         /* 网格项目*/
  29.         .container > .item {
  30.             background-color: lightgray;
  31.             border: 1px solid #000;
  32.             padding: 0.5em;
  33.         }
  35.         /* 编号从左上角开始（1，1），并递增 */
  36.         /* grid-area: 设置任何一个项目所在的网格单元的区域 */
  37.         /* grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号 */
  38.         /* 以第5个项目来举例 */
  39.         .container>.item:nth-of-type(5) {
  40.             background-color: lightyellow;
  41.             grid-area: 2/2 / 3/3;
  42.             /* 将它放入到第一个网格单元中 */
  43.             grid-area: 1/1 / 2/2;
  44.             /* 默认项目是跨越一行一列 */
  45.             grid-area: 1/1;
  46.             /* 但是，如果要跨越1行以上或1列以上，就不能省 */
  47.             /* 例如要跨2行3列 */
  48.             grid-area: 1/1 / 3/4;
  49.             /* 通常只关心跨几行或几列，并不关心结束的编号 */
  50.             grid-area: 1/1 / span 2/span 3;
  52.         }
  54.         /* 选中第一个项目 */
  55.         .container>.item:first-of-type {
  56.             background-color: limegreen;
  57.             grid-area: 3/1 / span 1/span 3;
  58.             /* 因为3/1是当前位置，所以可以省 */
  59.             grid-area: span 1/ span 3;
  60.             /* 之前说过，默认是跨一行一列 */
  61.             /* grid-area: span 3; 这样不行 */
  62.             grid-area: auto / span 3;
  64.         }
  66.         /* 总结：
  67.         grid-area: 参数数量不同，意义不同
  68.         1. 值中只有span
  69.             1.1 单值：跨的行数
  70.             1.2 双值：跨的行与列数，如果只想设置列数，就必须设置行数（auto）
  71.         2. 值中有span和编号
  72.             2.1 双值：没有span，默认跨1行1列，grid-area: 2/3;
  73.             2.2 三值：省了列结束编号或跨的数量，此时前面的值可使用auto
  74.             2.3 四值：最完整的语法 */
  75.     </style>
  76. </head>
  77. <body>
  78.     <div class="container">
  79.         <span class="item">item1</span>
  80.         <span class="item">item2</span>
  81.         <span class="item">item3</span>
  82.         <span class="item">item4</span>
  83.         <span class="item">item5</span>
  84.         <span class="item">item6</span>
  85.         <span class="item">item7</span>
  86.         <span class="item">item8</span>
  87.         <span class="item">item9</span>
  88.     </div>
  89. </body>
  90. </html>

项目在网格单元中的对齐方式 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>项目在网格单元中的对齐方式</title>
  8.     <style>
  10.         /* 1.place-items: 所有项目在网格单元中的对齐方式
  11.         2.place-self: 某一个项目在网格单元中的对齐方式 */
  13.         .container {
  14.             border: 1px solid #000;
  15.             padding: 0.5em;
  16.             display: grid;
  17.             grid-template-columns: repeat(3,1fr);
  18.             grid-template-rows: repeat(2,5em);
  19.             grid-auto-rows: 5em; 
  20.             gap: 0.5em;
  21.         }
  23.         .container > .item {
  24.             background-color: lightcyan;
  25.             border: 1px solid #000;
  26.             padding: 0.5em;
  27.         }
  29.         /* 默认：项目在网格单元中是拉伸的 */
  30.         /* 只有项目在网格单元中存在剩余空间的时候，对齐才有必要且有意义 */
  31.         .container>.item {
  32.             width: 5em;
  33.             height: 2em;
  34.         }
  36.         /* 1.设置容器中的“所有项目”在网格单元中的对齐方式 */
  37.         .container {
  38.             /* place-items: 垂直方向 水平方向; */
  39.             /* 垂直居上，水平居中 */
  40.             place-items: start center;
  41.             /* 垂直居中，水平居中 */
  42.             place-items: center center;
  43.             /* 当第二个值与第一个值相同时，可以省第二个值 */
  44.             place-items: center;
  46.             /* normal */
  47.             place-items: normal center;
  48.             /* normal当成auto的同义词 */
  49.             place-items: auto center;
  51.             /* place-items: inherit;
  52.             place-items: initial;
  53.             place-items: unset; */
  55.             /* 拉伸，取消项目的固定尺寸才可以看到效果 */
  56.             /* place-items: stretch; */
  57.         }
  59.         /* 2.设置容器中的“某一个项目”在网格单元中的对齐方式 */
  60.         /* 这个属性必须用在项目上：place-self */
  61.         .container>.item:nth-of-type(5) {
  62.             background-color: yellow;
  63.             place-self: center center;
  64.             place-self: end start;
  65.             /* 省去第二个start */
  66.             place-self: end;
  67.             /* 与下面的等效 */
  68.             place-self: end end;
  69.         }
  71.         /* 网格单元有二种表现形式：单元格，网格区域（多个单元格组成） */
  72.         .container>.item:nth-of-type(5) {
  73.             grid-area: span 2/ span 2;
  74.             place-self: center;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <div class="container">
  80.         <span class="item">item1</span>
  81.         <span class="item">item2</span>
  82.         <span class="item">item3</span>
  83.         <span class="item">item4</span>
  84.         <span class="item">item5</span>
  85.         <span class="item">item6</span>
  86.         <span class="item">item7</span>
  87.         <span class="item">item8</span>
  88.         <span class="item">item9</span>
  89.     </div>
  90. </body>
  91. </html>

项目在网格容器中的对齐方式 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>项目在网格容器中的对齐方式</title>
  8.     <style>
  9.         /* place-content: 垂直方向 水平方向*/
  11.         .container {
  12.             height: 25em;
  13.             border: 1px solid #000;
  14.             padding: 0.5em;
  15.             display: grid;
  16.             /* 只有所有项目在容器中存在剩余空间时对齐才有必要且有意义 */
  17.             grid-template-columns: repeat(3,10em);
  18.             grid-template-rows: repeat(2,5em);
  19.             grid-auto-rows: 5em; 
  20.             gap: 0.5em;
  21.             /* 默认值 */
  22.             /* 1.将所有项目做为一个整体在容器中对齐 */
  23.             place-content: start start;
  24.             place-content: start center;
  25.             place-content: center center;
  26.             place-content: center;
  27.             /* 2.将所有项目打散成独立个体在容器中设置对齐方式 */
  28.             /* 二端对齐 */
  29.             place-content: space-between space-between;
  30.             place-content: space-between;
  32.             place-content: space-around space-evenly;
  34.         }
  36.         .container > .item {
  37.             background-color: lightcyan;
  38.             border: 1px solid #000;
  39.             padding: 0.5em;
  40.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="container">
  47.         <span class="item">item1</span>
  48.         <span class="item">item2</span>
  49.         <span class="item">item3</span>
  50.         <span class="item">item4</span>
  51.         <span class="item">item5</span>
  52.         <span class="item">item6</span>
  53.         <span class="item">item7</span>
  54.         <span class="item">item8</span>
  55.         <span class="item">item9</span>
  56.     </div>
  57. </body>
  58. </html>

使用命名式的网格区域来重构圣怀布局 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>使用命名式的网格区域来重构圣怀布局</title>
  8.     <style>
  9.         /* 圣怀布局：grid实现，二边固定，中间自适应，主体优先渲染 */
  10.         body * {
  11.             border: 1px solid #000;
  12.         }
  13.         body {
  14.             display: grid;
  15.             grid-template-columns: 15em minmax(50vw,auto) 15em;
  16.             grid-template-rows: 3em minmax(80vh,auto) 3em;
  17.             gap: 0.5em;
  19.             /* 设置命名网格区域在轨道中的显示的位置 */
  20.             /* grid-template-areas: 
  21.             'header header header'
  22.             'left main right'
  23.             'footer footer footer'; */
  24.             grid-template-areas: 
  25.             'header header header'
  26.             '. main .'
  27.             'footer footer footer';
  28.         }
  30.         /* header,footer {
  31.             grid-area: span 1 / span 3;
  32.         }
  33.         main {
  34.             grid-area: 2 /2;
  35.         } */
  37.         header {
  38.             grid-area: header;
  39.         }
  40.         footer {
  41.             grid-area: footer;
  42.         }
  43.         main {
  44.             grid-area: main;
  45.         }
  46.         /* aside.left {
  47.             grid-area: left;
  48.         }
  49.         aside.left {
  50.             grid-area: left;
  51.         } */
  52.     </style>
  53. </head>
  54. <body>
  55.     <!-- 圣怀布局要求主体区优先显示，根据浏览器渲染顺序，主体应该写到前面去。 -->
  56.     <header>header</header>
  58.     <!-- 主体main应该优先渲染 -->
  59.     <main>main</main>
  60.     <aside class="left">left</aside>
  61.     <aside class="right">right</aside>
  63.     <footer>footer</footer>
  64. </body>
  65. </html>

模拟bootstrap/layui的12列栅格布局组件 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>模拟bootstrap/layui的12列栅格布局组件</title>
  8.     <link rel="stylesheet" href="grid.css">
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <!-- 一等份 -->
  13.         <!-- 栅格布局分为二步：
  14.         1.先创建一个行
  15.         2.在行中进行列的划分 -->
  17.         <div class="row">
  18.             <span class="item col-12">12列</span>
  19.         </div>
  21.         <!-- 二等分 -->
  22.         <div class="row">
  23.             <span class="item col-6">6列</span>
  24.             <span class="item col-6">6列</span>
  25.         </div>
  27.         <!-- 三等分 -->
  28.         <div class="row">
  29.             <span class="item col-4">4列</span>
  30.             <span class="item col-4">4列</span>
  31.             <span class="item col-4">4列</span>
  32.         </div>
  34.         <!-- 不充分 -->
  35.         <div class="row">
  36.             <span class="item col-3">3列</span>
  37.             <span class="item col-3">3列</span>
  38.             <span class="item col-3">3列</span>
  39.         </div>
  41.         <!-- 十二等分 -->
  42.         <div class="row">
  43.             <span class="item col-1">1列</span>
  44.             <span class="item col-1">1列</span>
  45.             <span class="item col-1">1列</span>
  46.             <span class="item col-1">1列</span>
  47.             <span class="item col-1">1列</span>
  48.             <span class="item col-1">1列</span>
  49.             <span class="item col-1">1列</span>
  50.             <span class="item col-1">1列</span>
  51.             <span class="item col-1">1列</span>
  52.             <span class="item col-1">1列</span>
  53.             <span class="item col-1">1列</span>
  54.             <span class="item col-1">1列</span>
  55.         </div>
  56.         <!-- 左中右三列，左右相同，中间不同 -->
  58.         <div class="row">
  59.             <span class="item col-3">3列</span>
  60.             <span class="item col-6">6列</span>
  61.             <span class="item col-3">3列</span>
  62.         </div>
  64.     </div>
  65. </body>
  66. </html>

使用封装好的grid布局组件来写一个案例 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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布局组件来写一个案例</title>
  8.     <link rel="stylesheet" href="grid.css">
  9.     <style>
  10.         .row:nth-of-type(2){
  11.             height: 80vh;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 通用三列布局 -->
  17.     <div class="container">
  18.         <!-- 页眉 -->
  19.         <div class="row">
  20.             <div class="item col-12 header">header</div>
  21.         </div>
  22.         <!-- 主体 -->
  23.         <div class="row">
  24.             <div class="item col-2 header">left</div>
  25.             <div class="item col-8 header">main</div>
  26.             <div class="item col-2 header">right</div>
  27.         </div>
  28.         <!-- 页脚 -->
  29.         <div class="row">
  30.             <div class="item col-12 header">footer</div>
  31.         </div>
  32.     </div>
  33. </body>
  34. </html>

模拟bootstrap/layui的12列栅格布局组件 css

  1. /* 初始化 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. body {
  9.     width: 100vw;
  10.     height: 100vh;
  11.     display: grid;
  12.     place-content: center;
  13. }
  15. .container {
  16.     min-width: 80vw;
  17.     display:  grid;
  18.     gap: 0.5em;
  19. }
  21. .container > .row {
  22.     display: grid;
  23.     grid-template-columns: repeat(12,1fr);
  24.     min-height: 3em;
  25.     gap: 0.5em;
  26. }
  28. .container > .row >.item{
  29.     padding: 1em;
  30.     text-align: center;
  31.     /* background-color: lightcyan; */
  32.     border: 1px solid;
  33.     /* border-radius: 5px; */
  34. }
  36. .col-12 {
  37.     grid-area: auto / span 12;
  38. }
  39. .col-11 {
  40.     grid-area: auto / span 11;
  41. }
  42. .col-10 {
  43.     grid-area: auto / span 10;
  44. }
  45. .col-9 {
  46.     grid-area: auto / span 9;
  47. }
  48. .col-8 {
  49.     grid-area: auto / span 8;
  50. }
  51. .col-7 {
  52.     grid-area: auto / span 7;
  53. }
  54. .col-6 {
  55.     grid-area: auto / span 6;
  56. }
  57. .col-5 {
  58.     grid-area: auto / span 5;
  59. }
  60. .col-4 {
  61.     grid-area: auto / span 4;
  62. }
  63. .col-3 {
  64.     grid-area: auto / span 3;
  65. }
  66. .col-2 {
  67.     grid-area: auto / span 2;
  68. }
  69. .col-1 {
  70.     grid-area: auto / span 1;
  71. }

总结：

圣怀布局：

grid实现，二边固定，中间自适应，主体优先渲染

网格容器：

由若干个矩形网格单元构成

网格项目：

网格容器的子元素，必须放在网格单元中

网格单元：

有”单元格”和”网格区域”二种表现形式

网格轨道：

由多个网格单元组成，根据排列方向有”行轨”和”列轨”之分

轨道间距：

容器中轨道之间的间距，有”行轨间距”和”列轨间距”

fr:

网格的伸缩因子

repeat：

文本重写的函数（以空格分隔）

minmax：

最小到最大区间的函数

轨道排列方式：”行优先” 和 “列优先”

grid-auto-flow: row;
grid-auto-flow: column;

隐式轨道： 新项目显示的轨道

隐式轨道的行高：grid-auto-rows
隐式轨道的列宽：grid-auto-columns

grid-area: 设置任何一个项目所在的网格单元的区域

格式” grid-area:行起始编号 / 列起始编号 / 行结束编号 / 列结束编;”

place-items: 所有项目在网格单元中的对齐方式

格式”place-items: center center; “

place-self: 某一个项目在网格单元中的对齐方式

格式”place-self: center center; “

place-content: 项目在网格容器中的对齐方式（垂直方向 水平方向）

格式”place-content: 垂直方向 水平方向”
将所有项目做为一个整体在容器中对齐：place-content: center center;
将所有项目打散成独立个体在容器中设置对齐方式：place-content: space-around space-evenly;

命名式的网格区域：

使用grid-area关联(header { grid-area: header; }) 再使用grid-template-areas来分配( grid-template-areas: ‘header header header’ ‘. main .’ ‘footer footer footer’;)

布局组件:

通过css，元素之间的独立性和class唯一性，预先定义css样式; 元素通过class来引用css中的样式

上一条：html基础:table入门下一条：分区出现“属性0字节”情况下的文件找回办法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多