博主信息
豌豆君
博文
22
粉丝
0
评论
0
访问量
5879
积分:0
P豆:46

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

2021年03月22日 12:22:21阅读数:173博客 / 豌豆君/ 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. <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>
  30. <!-- 主体main应该优先渲染 -->
  31. <main>main</main>
  32. <aside class="left">left</aside>
  33. <aside class="right">right</aside>
  34. <footer>footer</footer>
  35. </body>
  36. </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.轨道间距:容器中轨道之间的间距,有"行轨间距"和"列轨间距" */
  14. /* 网格容器 */
  15. .container {
  16. border: 1px solid #000;
  17. padding: 0.5em;
  18. /* flex中子元素默认为行内(inline)元素,grid中子元素默认为块(block)元素 */
  19. display: grid;
  20. /* 1.设置轨道的列宽 */
  21. /* 设置一个3列2行的布局空间 */
  22. grid-template-columns: auto;
  23. grid-template-columns: 10em 10em 10em;
  24. /* 2.设置轨道的行高 */
  25. grid-template-rows: auto;
  26. grid-template-rows: 5em 5em;
  27. /* 3.设置轨道的间距 */
  28. /* gap: 水平 垂直 */
  29. gap: 0.5em 1em;
  30. gap: 0.5em 0.5em;
  31. /* gap: 0.5em 0.5em;可简写gap: 0.5em; */
  32. gap: 0.5em;
  33. }
  34. /* 网格项目:网格容器中的"子元素"(不能是孙元素),与flex是一样的 */
  35. .container > .item {
  36. /* 默认生成一列N行的容器(N就是项目的数量) */
  37. background-color: lightgray;
  38. border: 1px solid #000;
  39. padding: 0.5em;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div class="container">
  45. <span class="item">item1</span>
  46. <span class="item">item2</span>
  47. <span class="item">item3</span>
  48. <span class="item">item4</span>
  49. <span class="item">item5</span>
  50. <span class="item">item6</span>
  51. </div>
  52. </body>
  53. </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;
  14. /* 一.设置轨道的列宽 */
  15. grid-template-columns: 10em 10em 10em;
  16. /* 设置轨道宽度时可以使用一个新的单位:fr(fraction),类似flex中的伸缩因子 */
  17. grid-template-columns: auto auto auto;
  18. /* 1. fr 与 auto 之间的区别 */
  19. /* 新需求:中间一列的宽度是二边的二倍 */
  20. /* 此时 auto 完全失灵 */
  21. grid-template-columns: 1fr 2fr 1fr;
  22. /* 2.fr 与 % 的区别 */
  23. /* 新需求:中间一列是左右的三倍 */
  24. /* % 不能识别轨道的间距所以用%时注意 */
  25. /* % 与 fr 可以共存,计算方式,总宽度减去百分比的宽度,将剩下的全部分给fr */
  26. /* auto, fr, % 都是相对单位,都可以触发自动计算机制,尽可能不要同时出现 */
  27. grid-template-columns: 1fr 3fr 1fr;
  28. grid-template-columns: 20% 60% 20%;
  29. grid-template-columns: 20% 1fr 20%;
  30. /* 3. fr 与其它单位混合,如 em, px */
  31. /* px 是固定的,em是固定, 计算时要减去这些固定值,将剩下的空间在fr之间分配 */
  32. /* 总宽度 -8em - 200px, 将剩下的空间在第2列与第3列之间分配(但是自动计算的值可能会被最小值限制) */
  33. grid-template-columns: 8em 1fr 2fr 200px;
  34. /* 4. fr 尽可能不要与auto同时使用 */
  35. /* auto 与 px , em ,会自动计算 */
  36. /* 与 auto 相邻的不是em, rem, %, 而是fr 那auto会被压缩到内容区 */
  37. grid-template-columns: 30% auto 10em;
  38. grid-template-columns: 1fr auto 1fr;
  39. /* 二.设置轨道的行高 */
  40. grid-template-rows: 5em 5em;
  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. </div>
  61. </body>
  62. </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;
  14. /* 一.设置轨道的列宽 */
  15. grid-template-columns: 10em 10em 10em;
  16. /* 1.repeat() */
  17. /* 第二个参数可以是多个值用空格隔开 */
  18. grid-template-columns: repeat(3,10em);
  19. grid-template-columns: repeat(3,10em 2em);
  20. grid-template-columns: repeat(3,1fr 2fr);
  21. /* 展开 */
  22. grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
  23. /* 混合使用 */
  24. grid-template-columns: repeat(2,1fr) 2fr;
  25. /* 展开 */
  26. grid-template-columns: 1fr 1fr 2fr;
  27. /* 2.minmax() */
  28. /* 中间列,最小宽度是20em,最大宽高是左右的2倍 */
  29. grid-template-columns: 1fr minmax(20em,2fr) 1fr;
  30. grid-template-columns: 20em minmax(20em,1fr);
  31. grid-template-columns: 20em minmax(20em,auto);
  32. /* 二.设置轨道的行高 */
  33. grid-template-rows: 5em 5em;
  34. /* 三.设置轨道的间距 */
  35. gap: 0.5em;
  36. }
  37. /* 网格项目*/
  38. .container > .item {
  39. background-color: lightgray;
  40. border: 1px solid #000;
  41. padding: 0.5em;
  42. }
  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. </div>
  54. </body>
  55. </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 */
  12. /* 网格容器 */
  13. .container {
  14. border: 1px solid #000;
  15. padding: 0.5em;
  16. display: grid;
  17. /* 一.设置轨道的列宽 */
  18. grid-template-columns: repeat(3,1fr);
  19. /* 二.设置轨道的行高 */
  20. grid-template-rows: 5em 5em;
  21. /* 此时声明的网格单元数量已经不够存入所有的网格项目了 */
  22. /* 此时,多出的三个项目会自动放入到自动生成的网格空间中了 */
  23. /* 这时,原来声明的网格单元叫:显式轨道
  24. 新项目显示的轨道称为:隐式轨道 */
  25. /* 此时,默认项目在容器中按:先行后列的顺序排列,也叫"行优先" */
  26. grid-auto-flow: row;
  27. /* 自动生成的隐式轨道的高度是自动的 */
  28. /* 行优先时要设置隐式轨道的行高 */
  29. /* grid-auto-rows: 5em; */
  30. /* 列优先 */
  31. grid-auto-flow: column;
  32. /* 列优先时要设置的隐式轨道的列宽 */
  33. grid-auto-columns: 1fr;
  34. /* 三.设置轨道的间距 */
  35. gap: 0.5em;
  36. }
  37. /* 网格项目*/
  38. .container > .item {
  39. background-color: lightgray;
  40. border: 1px solid #000;
  41. padding: 0.5em;
  42. }
  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. /* 网格容器 */
  10. .container {
  11. border: 1px solid #000;
  12. padding: 0.5em;
  13. display: grid;
  14. /* 一.设置轨道的列宽 */
  15. grid-template-columns: repeat(3,1fr);
  16. /* 二.设置轨道的行高 */
  17. grid-template-rows: 5em 5em;
  18. /* 行优先时要设置隐式轨道的行高 */
  19. grid-auto-rows: 5em;
  20. /* 三.设置轨道的间距 */
  21. gap: 0.5em;
  22. }
  23. /* 网格项目*/
  24. .container > .item {
  25. background-color: lightgray;
  26. border: 1px solid #000;
  27. padding: 0.5em;
  28. }
  29. /* 编号从左上角开始(1,1),并递增 */
  30. /* grid-area: 设置任何一个项目所在的网格单元的区域 */
  31. /* grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号 */
  32. /* 以第5个项目来举例 */
  33. .container>.item:nth-of-type(5) {
  34. background-color: lightyellow;
  35. grid-area: 2/2 / 3/3;
  36. /* 将它放入到第一个网格单元中 */
  37. grid-area: 1/1 / 2/2;
  38. /* 默认项目是跨越一行一列 */
  39. grid-area: 1/1;
  40. /* 但是,如果要跨越1行以上或1列以上,就不能省 */
  41. /* 例如要跨2行3列 */
  42. grid-area: 1/1 / 3/4;
  43. /* 通常只关心跨几行或几列,并不关心结束的编号 */
  44. grid-area: 1/1 / span 2/span 3;
  45. }
  46. /* 选中第一个项目 */
  47. .container>.item:first-of-type {
  48. background-color: limegreen;
  49. grid-area: 3/1 / span 1/span 3;
  50. /* 因为3/1是当前位置,所以可以省 */
  51. grid-area: span 1/ span 3;
  52. /* 之前说过,默认是跨一行一列 */
  53. /* grid-area: span 3; 这样不行 */
  54. grid-area: auto / span 3;
  55. }
  56. /* 总结:
  57. grid-area: 参数数量不同,意义不同
  58. 1. 值中只有span
  59. 1.1 单值:跨的行数
  60. 1.2 双值:跨的行与列数,如果只想设置列数,就必须设置行数(auto)
  61. 2. 值中有span和编号
  62. 2.1 双值:没有span,默认跨1行1列,grid-area: 2/3;
  63. 2.2 三值:省了列结束编号或跨的数量,此时前面的值可使用auto
  64. 2.3 四值:最完整的语法 */
  65. </style>
  66. </head>
  67. <body>
  68. <div class="container">
  69. <span class="item">item1</span>
  70. <span class="item">item2</span>
  71. <span class="item">item3</span>
  72. <span class="item">item4</span>
  73. <span class="item">item5</span>
  74. <span class="item">item6</span>
  75. <span class="item">item7</span>
  76. <span class="item">item8</span>
  77. <span class="item">item9</span>
  78. </div>
  79. </body>
  80. </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.place-items: 所有项目在网格单元中的对齐方式
  10. 2.place-self: 某一个项目在网格单元中的对齐方式 */
  11. .container {
  12. border: 1px solid #000;
  13. padding: 0.5em;
  14. display: grid;
  15. grid-template-columns: repeat(3,1fr);
  16. grid-template-rows: repeat(2,5em);
  17. grid-auto-rows: 5em;
  18. gap: 0.5em;
  19. }
  20. .container > .item {
  21. background-color: lightcyan;
  22. border: 1px solid #000;
  23. padding: 0.5em;
  24. }
  25. /* 默认:项目在网格单元中是拉伸的 */
  26. /* 只有项目在网格单元中存在剩余空间的时候,对齐才有必要且有意义 */
  27. .container>.item {
  28. width: 5em;
  29. height: 2em;
  30. }
  31. /* 1.设置容器中的“所有项目”在网格单元中的对齐方式 */
  32. .container {
  33. /* place-items: 垂直方向 水平方向; */
  34. /* 垂直居上,水平居中 */
  35. place-items: start center;
  36. /* 垂直居中,水平居中 */
  37. place-items: center center;
  38. /* 当第二个值与第一个值相同时,可以省第二个值 */
  39. place-items: center;
  40. /* normal */
  41. place-items: normal center;
  42. /* normal当成auto的同义词 */
  43. place-items: auto center;
  44. /* place-items: inherit;
  45. place-items: initial;
  46. place-items: unset; */
  47. /* 拉伸,取消项目的固定尺寸才可以看到效果 */
  48. /* place-items: stretch; */
  49. }
  50. /* 2.设置容器中的“某一个项目”在网格单元中的对齐方式 */
  51. /* 这个属性必须用在项目上:place-self */
  52. .container>.item:nth-of-type(5) {
  53. background-color: yellow;
  54. place-self: center center;
  55. place-self: end start;
  56. /* 省去第二个start */
  57. place-self: end;
  58. /* 与下面的等效 */
  59. place-self: end end;
  60. }
  61. /* 网格单元有二种表现形式:单元格,网格区域(多个单元格组成) */
  62. .container>.item:nth-of-type(5) {
  63. grid-area: span 2/ span 2;
  64. place-self: center;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <div class="container">
  70. <span class="item">item1</span>
  71. <span class="item">item2</span>
  72. <span class="item">item3</span>
  73. <span class="item">item4</span>
  74. <span class="item">item5</span>
  75. <span class="item">item6</span>
  76. <span class="item">item7</span>
  77. <span class="item">item8</span>
  78. <span class="item">item9</span>
  79. </div>
  80. </body>
  81. </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: 垂直方向 水平方向*/
  10. .container {
  11. height: 25em;
  12. border: 1px solid #000;
  13. padding: 0.5em;
  14. display: grid;
  15. /* 只有所有项目在容器中存在剩余空间时对齐才有必要且有意义 */
  16. grid-template-columns: repeat(3,10em);
  17. grid-template-rows: repeat(2,5em);
  18. grid-auto-rows: 5em;
  19. gap: 0.5em;
  20. /* 默认值 */
  21. /* 1.将所有项目做为一个整体在容器中对齐 */
  22. place-content: start start;
  23. place-content: start center;
  24. place-content: center center;
  25. place-content: center;
  26. /* 2.将所有项目打散成独立个体在容器中设置对齐方式 */
  27. /* 二端对齐 */
  28. place-content: space-between space-between;
  29. place-content: space-between;
  30. place-content: space-around space-evenly;
  31. }
  32. .container > .item {
  33. background-color: lightcyan;
  34. border: 1px solid #000;
  35. padding: 0.5em;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="container">
  41. <span class="item">item1</span>
  42. <span class="item">item2</span>
  43. <span class="item">item3</span>
  44. <span class="item">item4</span>
  45. <span class="item">item5</span>
  46. <span class="item">item6</span>
  47. <span class="item">item7</span>
  48. <span class="item">item8</span>
  49. <span class="item">item9</span>
  50. </div>
  51. </body>
  52. </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;
  18. /* 设置命名网格区域在轨道中的显示的位置 */
  19. /* grid-template-areas:
  20. 'header header header'
  21. 'left main right'
  22. 'footer footer footer'; */
  23. grid-template-areas:
  24. 'header header header'
  25. '. main .'
  26. 'footer footer footer';
  27. }
  28. /* header,footer {
  29. grid-area: span 1 / span 3;
  30. }
  31. main {
  32. grid-area: 2 /2;
  33. } */
  34. header {
  35. grid-area: header;
  36. }
  37. footer {
  38. grid-area: footer;
  39. }
  40. main {
  41. grid-area: main;
  42. }
  43. /* aside.left {
  44. grid-area: left;
  45. }
  46. aside.left {
  47. grid-area: left;
  48. } */
  49. </style>
  50. </head>
  51. <body>
  52. <!-- 圣怀布局要求主体区优先显示,根据浏览器渲染顺序,主体应该写到前面去。 -->
  53. <header>header</header>
  54. <!-- 主体main应该优先渲染 -->
  55. <main>main</main>
  56. <aside class="left">left</aside>
  57. <aside class="right">right</aside>
  58. <footer>footer</footer>
  59. </body>
  60. </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.在行中进行列的划分 -->
  16. <div class="row">
  17. <span class="item col-12">12列</span>
  18. </div>
  19. <!-- 二等分 -->
  20. <div class="row">
  21. <span class="item col-6">6列</span>
  22. <span class="item col-6">6列</span>
  23. </div>
  24. <!-- 三等分 -->
  25. <div class="row">
  26. <span class="item col-4">4列</span>
  27. <span class="item col-4">4列</span>
  28. <span class="item col-4">4列</span>
  29. </div>
  30. <!-- 不充分 -->
  31. <div class="row">
  32. <span class="item col-3">3列</span>
  33. <span class="item col-3">3列</span>
  34. <span class="item col-3">3列</span>
  35. </div>
  36. <!-- 十二等分 -->
  37. <div class="row">
  38. <span class="item col-1">1列</span>
  39. <span class="item col-1">1列</span>
  40. <span class="item col-1">1列</span>
  41. <span class="item col-1">1列</span>
  42. <span class="item col-1">1列</span>
  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. </div>
  51. <!-- 左中右三列,左右相同,中间不同 -->
  52. <div class="row">
  53. <span class="item col-3">3列</span>
  54. <span class="item col-6">6列</span>
  55. <span class="item col-3">3列</span>
  56. </div>
  57. </div>
  58. </body>
  59. </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. }
  7. body {
  8. width: 100vw;
  9. height: 100vh;
  10. display: grid;
  11. place-content: center;
  12. }
  13. .container {
  14. min-width: 80vw;
  15. display: grid;
  16. gap: 0.5em;
  17. }
  18. .container > .row {
  19. display: grid;
  20. grid-template-columns: repeat(12,1fr);
  21. min-height: 3em;
  22. gap: 0.5em;
  23. }
  24. .container > .row >.item{
  25. padding: 1em;
  26. text-align: center;
  27. /* background-color: lightcyan; */
  28. border: 1px solid;
  29. /* border-radius: 5px; */
  30. }
  31. .col-12 {
  32. grid-area: auto / span 12;
  33. }
  34. .col-11 {
  35. grid-area: auto / span 11;
  36. }
  37. .col-10 {
  38. grid-area: auto / span 10;
  39. }
  40. .col-9 {
  41. grid-area: auto / span 9;
  42. }
  43. .col-8 {
  44. grid-area: auto / span 8;
  45. }
  46. .col-7 {
  47. grid-area: auto / span 7;
  48. }
  49. .col-6 {
  50. grid-area: auto / span 6;
  51. }
  52. .col-5 {
  53. grid-area: auto / span 5;
  54. }
  55. .col-4 {
  56. grid-area: auto / span 4;
  57. }
  58. .col-3 {
  59. grid-area: auto / span 3;
  60. }
  61. .col-2 {
  62. grid-area: auto / span 2;
  63. }
  64. .col-1 {
  65. grid-area: auto / span 1;
  66. }

总结:

圣怀布局:

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中的样式

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论