博客列表 >与8级工程师一起,深度理解12列栅格布局的原理与实现...

与8级工程师一起,深度理解12列栅格布局的原理与实现...

张福根一修品牌运营
张福根一修品牌运营原创
2020年10月30日 19:48:45829浏览

深度理解grid实现12列栅格布局的原理与实现

效果展示:

grid实现12列栅格布局

源码展示:

htmt:

  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>深刻理解grid实现12列栅格布局的原理与实现</title>
  7. <link rel="stylesheet" href="style.css" />
  8. </head>
  9. <body>
  10. <div class="container">
  11. <!-- 页眉 -->
  12. <div class="row">
  13. <div class="item col-12">header</div>
  14. </div>
  15. <!-- 主体 -->
  16. <div class="row">
  17. <div class="item col-2">left</div>
  18. <div class="item col-8">main</div>
  19. <div class="item col-2">right</div>
  20. </div>
  21. <!-- 页脚 -->
  22. <div class="row">
  23. <div class="item col-12">footer</div>
  24. </div>
  25. </div>
  26. </body>
  27. </html>

CSS:

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

效果总结:

  • 封装栅格布局组件来实现网站的布局
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议