Flexible responsive grid in Gantry5?

[lipatovroman]

Hello.
For example, in category view we have 3 cards in a row.

So we use HTML code for that:
<div class="g-block size-33 padding2">
In this case, we get 3 cards in a row with these breakpoints: 75rem, 60rem, 48rem.
And then, we get 1 card in a row if screen width less than 48rem.
How to show 2 cards in a row in 60rem and 48rem breakpoints?
We need 3,2,1 cards in a row depending on current screen width.

This is how we can do it with bootstrap:
<div class="col-lg-4 col-md-6 col-12 mb-4">

[pablop76]

Add css
@media screen and (max-width: 900px){
.size-33 {
flex: 0 50%;
width: 50%;
}

}
Include css specificity if you want to use only for a specific element (add a css class distinguishing it)

Using Media Queries Gantry
https://docs.gantry.org/gantry5/tutorials/media-queries

[lipatovroman]

.size-33

Very good. Thank you.
Maybe this will be useful for someone. Here's what it looks like:

/*BOF Custom Gantry5 Grid for App Cards;*/ @media (max-width: 75rem) and (min-width: 60rem) { .appcard.size-33 { flex: 0 0 33.3333%; width: 33.3333%; } } @media (max-width: 60rem) and (min-width: 48rem) { .appcard.size-33 { flex: 0 0 50%; width: 50%; } } @media (max-width: 48rem) and (min-width: 42rem) { .appcard.size-33 { flex: 0 0 50%; width: 50%; } } @media (max-width: 42rem) { .appcard.size-33 { flex: 0 0 100%; width: 100%; } } /*EOF Custom Gantry5 Grid for App Cards;*/