移动端宫格布局

末蓝、 2021-10-18 06:26 469阅读 0赞

**1.使用grid布局**

#container{
           display: grid;
           grid-template-columns: repeat(auto-fit, 33.3%);
           /* grid-template-rows: repeat(3, 300px); */
       }
    
       .item {
       height: 100px;
       font-size: 4em;
       text-align: center;
       border: 1px solid #e5e4e9;
       }
    
    <div id="container">
         <div class="item item-1">1</div>
          <div class="item item-2">2</div>
          <div class="item item-3">3</div>
          <div class="item item-4">4</div>
          <div class="item item-5">5</div>
          <div class="item item-6">6</div>
          <div class="item item-7">7</div>
          <div class="item item-8">8</div>
          <div class="item item-9">9</div>
          <div class="item item-6">10</div>
          <div class="item item-7">11</div>
          <div class="item item-8">12</div>
          <div class="item item-9">13</div>
          <div class="item item-9">14</div>
      </div>

效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]  
**2.flex布局**

#container{
                /* display: grid;
                grid-template-columns: repeat(auto-fit, 33.3%); */
                /* grid-template-rows: repeat(3, 300px); */
                display: flex;
                flex-flow: row wrap;
                align-content: flex-start;
            }
    
            .item {
              height: 100px;
              font-size: 4em;
              text-align: center;
              border: 1px solid #e5e4e9;
              /* width: 32.8%; */
              flex: 0 0 33.333%;
              box-sizing: border-box;
            }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]

注：  
flex: flex-grow、flex-shrink 、flex-basis的简写  
具体flex属性：[详见][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20211018/57434cf08a8a4ca5bef215f560ee32f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20211018/4d3f3f163446478c8198ffacd06ea592.png
[Link 1]: https://blog.csdn.net/masorl/article/details/80783527