Wie erstellt man ein HTML-Grid-System aus 6 Elementen?

Question

Ich habe ein Rastersystem mit 9 Artikel, und alles, was ich möchte die aktuelle anpassen, um einen 6 Artikel Gitter zu machen wie diese:

Hier ist ein Stift meiner aktuellen Rastersystem:

https://codepen.io/anon/pen/NAjqzR

Mein HTML-Code:

<div class="container" style="max-width:1300px;">    
    <div class="row"> 
     <!-- col-left --> 
      <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0"> 
      <a href="/collections/accessories" class="banner zoom-in"> 
     <span class="figure"> 
      <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/mens.png?14209798005151405036" alt=""/> 
      <span class="figcaption"> 
      <span class="block-table"> 
       <span class="block-table-cell"> 
       <span class="banner__title size40">Mens</span> 
       <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
       </span> 
      </span> 
      </span> 
     </span> 
     </a> 
     <div class="divider"></div> 
     <a href="/collections/skate" class="banner zoom-in"> 
     <span class="figure"> 
      <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/skates.png?14209798005151405036" alt=""/> 
      <span class="figcaption"> 
      <span class="block-table"> 
       <span class="block-table-cell"> 
       <span class="banner__title size40">Skate</span> 
       <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
       </span> 
      </span> 
      </span> 
     </span> 
     </a> 
     <div class="divider"></div> 
    </div> 
     <!-- /col-left --> 
     <!-- col-right --> 
     <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0"> 
      <a href="/collections/accessories" class="banner zoom-in"> 
       <span class="figure"> 
        <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/accessories_a2c62c03-a1fe-4b8d-96e3-0de1e87571bf.png?14209798005151405036" alt=""/> 
        <span class="figcaption"> 
         <span class="block-table"> 
          <span class="block-table-cell"> 
           <span class="banner__title size40">Accessories</span> 
           <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
          </span> 
         </span> 
        </span> 
       </span> 
      </a> 
      <div class="divider"></div> 
      <a href="/collections/skate" class="banner zoom-in"> 
       <span class="figure"> 
        <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/boardshorts.png?14209798005151405036" alt=""/> 
        <span class="figcaption"> 
         <span class="block-table"> 
          <span class="block-table-cell"> 
           <span class="banner__title size40">Boardshorts</span> 
           <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
          </span> 
         </span> 
        </span> 
       </span> 
      </a> 
     <div class="divider"></div> 
     </div> 
    <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0"> 
     <a href="/collections/accessories" class="banner zoom-in"> 
     <span class="figure"> 
      <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/womens.png?14209798005151405036" alt=""/> 
      <span class="figcaption"> 
      <span class="block-table"> 
       <span class="block-table-cell"> 
       <span class="banner__title size40">Womens</span> 
       <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
       </span> 
      </span> 
      </span> 
     </span> 
     </a> 
     <div class="divider"></div> 
     <a href="/collections/skate" class="banner zoom-in"> 
     <span class="figure"> 
      <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/footwear.png?14209798005151405036" alt=""/> 
      <span class="figcaption"> 
      <span class="block-table"> 
       <span class="block-table-cell"> 
       <span class="banner__title size40">Footwear</span> 
       <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
       </span> 
      </span> 
      </span> 
     </span> 
     </a> 
    </div> 
     <!-- /col-right --> 
    </div> 
    <div class="divider"></div> 

</div> 

Answer 1

Es scheint niemand zu lösen versucht, es. Ich habe es selbst gelöst. Dies ist für jemanden, der nach einem Rastersystem wie diesem sucht.

ersetzen Sie einfach den alle html zu diesem

<div class="container" style="max-width:1300px;">    
<div class="row"> 
    <!-- col-left --> 
     <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0"> 
     <a href="/collections/accessories" class="banner zoom-in"> 
    <span class="figure"> 
     <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/mens.png?14209798005151405036" alt=""/> 
     <span class="figcaption"> 
     <span class="block-table"> 
      <span class="block-table-cell"> 
      <span class="banner__title size40">Mens</span> 
      <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
      </span> 
     </span> 
     </span> 
    </span> 
    </a> 
    <div class="divider"></div> 
    <a href="/collections/skate" class="banner zoom-in"> 
    <span class="figure"> 
     <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/skates.png?14209798005151405036" alt=""/> 
     <span class="figcaption"> 
     <span class="block-table"> 
      <span class="block-table-cell"> 
      <span class="banner__title size40">Skate</span> 
      <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
      </span> 
     </span> 
     </span> 
    </span> 
    </a> 
    <div class="divider"></div> 
</div> 
    <!-- /col-left --> 
    <!-- col-right --> 
    <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0"> 
     <a href="/collections/accessories" class="banner zoom-in"> 
      <span class="figure"> 
       <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/accessories_a2c62c03-a1fe-4b8d-96e3-0de1e87571bf.png?14209798005151405036" alt=""/> 
       <span class="figcaption"> 
        <span class="block-table"> 
         <span class="block-table-cell"> 
          <span class="banner__title size40">Accessories</span> 
          <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
         </span> 
        </span> 
       </span> 
      </span> 
     </a> 
     <div class="divider"></div> 
     <a href="/collections/skate" class="banner zoom-in"> 
      <span class="figure"> 
       <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/boardshorts.png?14209798005151405036" alt=""/> 
       <span class="figcaption"> 
        <span class="block-table"> 
         <span class="block-table-cell"> 
          <span class="banner__title size40">Boardshorts</span> 
          <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
         </span> 
        </span> 
       </span> 
      </span> 
     </a> 
    <div class="divider"></div> 
    </div> 
<div class="col-xs-12 col-sm-offset-2 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0"> 
    <a href="/collections/accessories" class="banner zoom-in"> 
    <span class="figure"> 
     <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/womens.png?14209798005151405036" alt=""/> 
     <span class="figcaption"> 
     <span class="block-table"> 
      <span class="block-table-cell"> 
      <span class="banner__title size40">Womens</span> 
      <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
      </span> 
     </span> 
     </span> 
    </span> 
    </a> 
    <div class="divider"></div> 
    <a href="/collections/skate" class="banner zoom-in"> 
    <span class="figure"> 
     <img src="https://cdn.shopify.com/s/files/1/1299/2659/files/footwear.png?14209798005151405036" alt=""/> 
     <span class="figcaption"> 
     <span class="block-table"> 
      <span class="block-table-cell"> 
      <span class="banner__title size40">Footwear</span> 
      <span class="btn btn--ys btn--xl banner_btn">Shop now!</span> 
      </span> 
     </span> 
     </span> 
    </span> 
    </a> 
</div> 
    <!-- /col-right --> 
</div> 
<div class="divider"></div>