Shopify -复制具有不同样式的块

<div class="product-list">
  {% for product in products %}
    <div class="product-item">
      <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
      <h2>{{ product.title }}</h2>
      <p>{{ product.price | money }}</p>
    </div>
  {% endfor %}
</div>

.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: calc(25% - 20px);
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

<div class="product-list">
  {% for product in products %}
    <div class="product-item">
      <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
      <h2>{{ product.title }}</h2>
      <p>{{ product.price | money }}</p>
    </div>
  {% endfor %}
</div>

<div class="product-list-alt">
  {% for product in products %}
    <div class="product-item-alt">
      <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
      <h2>{{ product.title }}</h2>
      <p>{{ product.price | money }}</p>
    </div>
  {% endfor %}
</div>

.product-list-alt {
  display: flex;
  flex-wrap: wrap;
}

.product-item-alt {
  width: calc(50% - 20px);
  margin: 10px;
  border: 2px solid #f00;
  padding: 20px;
}