Archived topic
Flexbox grid layout
3 replies · Started by George on May 2, 2020
I use ACF to display related products (not Woo Commerce, it's just a custom post type) at the bottom of the single page template. It all works fine but I am unsure of how to style it. Basically, I am after a 4 column grid that becomes two columns on tablet and one column on mobile along with gutters between columns apart from the mobile version. I am skeptical of using Unsemantic CSS since I know it's going to become incompatible when GP switches to Flexbox.
My HTML markup for the item is this:
<div class="flex-grid">
<div class="col">
<a href="#">
<img src="url-of-image">
<h3>Product title</h3>
</a>
</div>
</div>Obviously, this is inside a foreach loop to populate all related products selected from the backend.
Can you give me some Flexbox CSS to achieve the grid layout I am after? Feel free to modify the HTML markup if necessary.
Hi there,
try this:
@media (min-width: 768px) {
.flex-grid {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
/* 2 column tablet */
.flex-grid>.col {
flex: 1 0 50%;
padding-left: 20px;
box-sizing: border-box;
}
}
@media (min-width: 1024px) {
/* 4 column desktop */
.flex-grid>.col {
flex: 1 0 25%;
}
}Works like a charm, David, thank you!
Awesome - glad to be of help.
