html - 在主题自定义模式下使用 Shopify 主栏 block 制作图像网格

Question

我正在尝试在 Shopify 的主题自定义模式下使用主栏 block 创建图像网格。

网格是一个容器内的 4 张图片，外面的两张图片是对称的，里面的两张应该是堆叠在一起的，它们的组合高度等于外面的图片。

我很难堆叠中间的两个图像，而没有为底部图像分配 position: absolute;。

代码如下:

@media (min-width: 769px) {
.large--width-37 {
  width: 37%;
 }
 .large--width-26 {
  width: 26%;
 }
}
.grid__item {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    min-height: 1px;
    vertical-align: top;
    width: 100%;
 }
 .wrapper {
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
 }
.grid__item img {
    width: 100%;
    padding: 0px 0px 0px 0px;
 }

<div class="wrapper">
  <div class="grid">
    <div class="" style="position:relative;">
      <div class="grid__item large--width-37 medium--width-37 small--     hide">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6A_2_2048x.jpg?v=1565135091">
        </a>
       <div>
      </div>
    <div class="grid__item large--width-37 medium--width-26 small--hide">
      <div class="" style="position:relative;">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6B_2_2048x.jpg?v=1565135452">
        </a>
       </div>
    </div>
    <div class="grid__item large--width-37 medium--width-26 small--hide">
      <div class="" style="position:relative;">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6C_2_2048x.jpg?v=1565135627">
        </a>
       </div>
    </div>
    <div class="grid__item large--width-37 medium--width-37 small--hide">
      <div class="" style="position:relative;">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6D_2_2048x.jpg?v=1565135691">
        </a>
       </div>
    </div>
  </div>
</div>

Answer 1

@media (min-width: 769px) {
.large--width-37 {
width: 37%;
}
.large--width-26 {
width: 26%;
}
}
.grid__item {
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  min-height: 1px;
  vertical-align: top;
  width:50%; 
}
.wrapper {
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  display:inline-block;
}
.grid__item img {
  width: 100%;
  padding: 0px 0px 0px 0px;
  height:300px;
  object-fit:cover;
  float:left;
}
.part-2 .grid__item:nth-child(2){width:25%; height:150px;}
.part-2 .grid__item:nth-child(3){width:25%; height:150px;}
.part-2 .grid__item:nth-child(4){width:50%; height:150px;}

<div class="wrapper">
  <div class="grid">
    <div class="" style="position:relative;">
      <div class="grid__item large--width-37 medium--width-37 small--hide">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6A_2_2048x.jpg?v=1565135091">
        </a> 
      </div>
    <div class="grid__item large--width-37 medium--width-26 small--hide">
      <div class="" style="position:relative;">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6B_2_2048x.jpg?v=1565135452">
        </a>
       </div>
    </div>
    <div class="grid__item large--width-37 medium--width-26 small--hide">
      <div class="" style="position:relative;">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6C_2_2048x.jpg?v=1565135627">
        </a>
       </div>
    </div>
    <div class="grid__item large--width-37 medium--width-37 small--hide">
      <div class="" style="position:relative;">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6D_2_2048x.jpg?v=1565135691">
        </a>
       </div>
    </div>
  </div>
</div>

 
<div class="wrapper part-2">
<h2>Part 2</h2>
  <div class="grid">
    <div class="" style="position:relative;">
      <div class="grid__item large--width-37 medium--width-37 small--hide">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6A_2_2048x.jpg?v=1565135091">
        </a> 
      </div>
    <div class="grid__item large--width-37 medium--width-26 small--hide">
      <div class="" style="position:relative;">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6B_2_2048x.jpg?v=1565135452">
        </a>
       </div>
    </div>
    <div class="grid__item large--width-37 medium--width-26 small--hide">
      <div class="" style="position:relative;">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6C_2_2048x.jpg?v=1565135627">
        </a>
       </div>
    </div>
    <div class="grid__item large--width-37 medium--width-37 small--hide">
      <div class="" style="position:relative;">
        <a href="">
          <img src="//cdn.shopify.com/s/files/1/0336/7793/files/Fall19_HP_6D_2_2048x.jpg?v=1565135691">
        </a>
       </div>
    </div>
  </div>
</div>

希望对你有所帮助