在主题自定义模式下使用 Shopify 主列块制作图像网格答案

【问题标题】：Making an image grid using Shopify main column blocks in theme customization mode在主题自定义模式下使用 Shopify 主列块制作图像网格
【发布时间】：2019-08-09 06:07:25
【问题描述】：

我正在尝试在 Shopify 的主题自定义模式中使用主列块创建图像网格。

网格是一个容器内的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>

【问题讨论】：

你能提供一个你想要的图像布局和一个粗略的图表吗？
这是我正在尝试制作的布局。它将在小于 767px 的屏幕上隐藏。 cdn.shopify.com/s/files/1/0336/7793/files/…

标签： html css shopify

【解决方案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>

希望这对你有帮助

【讨论】：