html - 如何用 6 个元素制作这样的 HTML 网格系统？

Question

我有一个包含 9 个元素的网格系统，我只想自定义电流以制作一个像这样的 6 个元素的网格:

这是我当前网格系统的笔:

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

我的 HTML 代码:

<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

似乎没有人试图解决它。我自己解决了。 这是为寻找这样的网格系统的人准备的。

把所有的html替换成这个

<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>