CODEWITHSUNDEEP
javascripthtmlcssshopify
Carlvic Lim
Carlvic Lim

Reputation: 29

How to auto align grid items?? [Shopify]

It's possible to align all the grid items if they have different content size??? Check the my image below as example: enter image description here

Test Site : https://strokes-test.myshopify.com/

Code for 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>

Upvotes: 0

Views: 359

Answers (1)

DVS
DVS

Reputation: 326

Add this 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;
}

It will look like this. enter image description here

Upvotes: 2

Related Questions