search

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

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

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

深度理解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. }
  7. body {
  8.   min-width: 100vw;
  9.   min-height: 100vh;
  10.   display: grid;
  11.   place-content: center;
  12. }
  14. .container {
  15.   display: grid;
  16.   min-width: 90vw;
  17.   gap: 0.5em;
  18. }
  20. .container > .row {
  21.   display: grid;
  22.   grid-template-columns: repeat(12, 1fr);
  23.   gap: 0.5em;
  24.   min-height: 3em;
  25. }
  27. .container > .row:nth-of-type(1) {
  28.   min-height: 15vh;
  29. }
  31. .container > .row:nth-of-type(2) {
  32.   min-height: 70vh;
  33. }
  35. .container > .row:nth-of-type(3) {
  36.   min-height: 5vh;
  37. }
  39. .container > .row > .item {
  40.   background-color: lightgreen;
  41.   padding: 1em;
  42.   border: 1px solid;
  43.   text-align: center;
  44. }
  46. .col-12 {
  47.   grid-column: span 12;
  48. }
  50. .col-11 {
  51.   grid-column: span 11;
  52. }
  54. .col-10 {
  55.   grid-column: span 10;
  56. }
  58. .col-9 {
  59.   grid-column: span 9;
  60. }
  62. .col-8 {
  63.   grid-column: span 8;
  64. }
  66. .col-7 {
  67.   grid-column: span 7;
  68. }
  70. .col-6 {
  71.   grid-column: span 6;
  72. }
  74. .col-5 {
  75.   grid-column: span 5;
  76. }
  78. .col-4 {
  79.   grid-column: span 4;
  80. }
  82. .col-3 {
  83.   grid-column: span 3;
  84. }
  86. .col-2 {
  87.   grid-column: span 2;
  88. }
  90. .col-1 {
  91.   grid-column: span 1;
  92. }

效果总结：

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

相关文章

查看更多