How to choose between grid and flex for a listing page

UpdatedJuly 28, 2022

•2 min read•View as Markdown

How to choose between grid and flex for a listing page

Stavros Ioannidis

I am a web developer from Greece, working mostly with Laravel.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

How to make simple slideshow using cool CSS and JS features

Hello. Today I'm making a simple slideshow using cool CSS and JS features. I'm gonna be using: CSS variables CSS transformations CSS functions CSS grid JS Proxy The HTML <div class="slideshow"> <div class="slides-container"> <div class="slid...

Nov 13, 20227 min read454

How to make simple slideshow using cool CSS and JS features

How to create a brand logo grid

In this post I will demonstrate how to create a brand logo grid like the one below: The tricky part of such a grid is the colored gap between the logo tiles. The solution I came up with, I think is acceptable. I added a 1px box-shadow to the grid it...

Oct 30, 20221 min read161

Two ways to handle ltr/rtl on a page.

When creating a multilingual web page you might need to handle languages written from right to left. This comes with some design issues. First, you must add the dir attribute to your root (<html>) element. But the dir attribute alone cannot tackle ev...

Oct 21, 20222 min read457

Work needs meaning

Hello again. In this post, I'm going to share a thought I had. For the last six months, I've been struggling with not-so-interesting work. It was some things that I had to do that were so boring I almost believed that I didn't like my job anymore. I ...

Oct 14, 20223 min read92

istavros

7 posts

Using flex

When using flex to create a grid-like structure we have to use flex-wrap. We make sure that the dimensions of our items are ok using flex-shink and flex-grow if needed. We need items to be centered so we will use justify-content: center. Here is a demo:

ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

We can see a problem here. The last row is not complete and the items are centered within this row. This doesn’t look like items in a grid. If we change to justify-content: flex-start everything will be on the left side, and all the available free space will be on the right. Not pretty.

Using grid

By using grid we don’t need to define something like flex-wrap but we need to define the columns' widths. In our example, we know that each item needs to be 100px wide, and the number of columns should vary depending on the width of the container. To achieve this we will use the repeat function with the auto-fill value. To center the items in the container we will use again justify-content: center.

Here is the demo:

ul { display: grid; grid-template-columns: repeat(auto-fill, 100px); justify-content: center; gap: 10px; }

The difference here is that although we used justify-content: center the last row is left aligned and the items are kept within the grid lines. This is much better than flex for this case.

A grid with justify-content: center centers the whole grid, while a flex container with justify-content: center centers the individual items.

Command Palette

Comments

More from this blog

Using flex

Using grid

Conclusion