【问题标题】: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;
    }
    

    它看起来像这样。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-03-01
      • 1970-01-01
      • 1970-01-01
      • 2021-07-29
      • 2011-04-28
      • 2015-05-01
      • 2021-06-23
      • 1970-01-01
      相关资源
      最近更新 更多