如何自动对齐网格项目？ [购物]

【问题标题】：How to auto align grid items?? [Shopify]如何自动对齐网格项目？ [购物]
【发布时间】：2021-04-01 12:15:23
【问题描述】：

如果内容大小不同，是否可以对齐所有网格项？？？以我的图片为例：

测试站点：https://strokes-test.myshopify.com/

li.griditems 的代码

  <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
        {% include 'product-grid-item', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
      </li>

【问题讨论】：

标签： javascript html css shopify

【解决方案1】：

添加这个 css。

.grid--view-items {
    overflow: auto;
    margin-bottom: -35px;
    display: flex;
    flex-wrap: wrap;
}
.grid--view-items li.grid__item .products {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.products .product_left {
    float: left;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

它看起来像这样。

【讨论】：