search

博客列表 >grid制作12列栅格布局

grid制作12列栅格布局

Brain
Brain原创
2020年08月15日 12:10:30811浏览
  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</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       body {
  14.         min-width: 100vw;
  15.         min-height: 100vh;
  16.         display: flex;
  17.         justify-content: center;
  18.         align-items: center;
  19.       }
  20.       .container {
  21.         display: grid;
  22.         min-width: 1000px;
  23.         gap: 5px;
  24.       }
  25.       .container > .row {
  26.         display: grid;
  27.         grid-template-columns: repeat(12, 1fr);
  28.         gap: 5px;
  29.         min-height: 50px;
  30.       }
  31.       .container > .row > .item {
  32.         background-color: lightgreen;
  33.         padding: 10px;
  34.       }
  35.       .container > .row > .col-12 {
  36.         grid-column: span 12;
  37.       }
  38.       .container > .row > .col-11 {
  39.         grid-column: span 11;
  40.       }
  41.       .container > .row > .col-10 {
  42.         grid-column: span 10;
  43.       }
  44.       .container > .row > .col-9 {
  45.         grid-column: span 9;
  46.       }
  47.       .container > .row > .col-8 {
  48.         grid-column: span 8;
  49.       }
  50.       .container > .row > .col-7 {
  51.         grid-column: span 7;
  52.       }
  53.       .container > .row > .col-6 {
  54.         grid-column: span 6;
  55.       }
  56.       .container > .row > .col-5 {
  57.         grid-column: span 5;
  58.       }
  59.       .container > .row > .col-4 {
  60.         grid-column: span 4;
  61.       }
  62.       .container > .row > .col-3 {
  63.         grid-column: span 3;
  64.       }
  65.       .container > .row > .col-2 {
  66.         grid-column: span 2;
  67.       }
  68.       .container > .row > .col-1 {
  69.         grid-column: span 1;
  70.       }
  71.     </style>
  72.   </head>
  73.   <body>
  74.     <div class="container">
  75.       <div class="row">
  76.         <div class="item col-12">12列</div>
  77.       </div>
  78.       <div class="row">
  79.         <div class="item col-1">1列</div>
  80.         <div class="item col-1">1列</div>
  81.         <div class="item col-1">1列</div>
  82.         <div class="item col-1">1列</div>
  83.         <div class="item col-1">1列</div>
  84.         <div class="item col-1">1列</div>
  85.         <div class="item col-1">1列</div>
  86.         <div class="item col-1">1列</div>
  87.         <div class="item col-1">1列</div>
  88.         <div class="item col-1">1列</div>
  89.         <div class="item col-1">1列</div>
  90.         <div class="item col-1">1列</div>
  91.       </div>
  92.       <div class="row">
  93.         <div class="item col-6">6列</div>
  94.         <div class="item col-6">6列</div>
  95.       </div>
  96.       <div class="row">
  97.         <div class="item col-4">4列</div>
  98.         <div class="item col-4">4列</div>
  99.         <div class="item col-4">4列</div>
  100.       </div>
  101.       <div class="row">
  102.         <div class="item col-3">3列</div>
  103.         <div class="item col-3">3列</div>
  104.         <div class="item col-3">3列</div>
  105.         <div class="item col-3">3列</div>
  106.       </div>
  107.       <div class="row">
  108.         <div class="item col-2">2列</div>
  109.         <div class="item col-2">2列</div>
  110.         <div class="item col-2">2列</div>
  111.         <div class="item col-2">2列</div>
  112.         <div class="item col-2">2列</div>
  113.         <div class="item col-2">2列</div>
  114.       </div>
  115.       <div class="row">
  116.         <div class="item col-10">10列</div>
  117.         <div class="item col-2">2列</div>
  118.       </div>
  119.     </div>
  120.   </body>
  121. </html>
上一条：flex制作三列布局下一条：flex和grid基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议