Should I use flexbox or grid to display some store items?

I’m trying to learn flexbox and grid but creating an e-commerce design. I’m at the stage where I need to display the store items on the page. Basic, one after the other

<section class="store_items">
    <article><img src="https://via.placeholder.com/300x199" alt="" srcset=""></article>
    <article><img src="https://via.placeholder.com/300x199" alt="" srcset=""></article>
....
</section>

Here’s the css.

.store_items {
  display: flex;
  flex-flow: row wrap; 
  justify-content: space-evenly;
}
article {
  margin: 20px auto;
}

Adding the 20px gap with gap didn’t work well.

Two questions:

  1. Is this the right way or should I be using grid?
  2. Am I right in adding the margin top/bottom to the article or is there a way to do it on the parent with flex?
  3. The image below is the result. Is there a way to keep the last article to the left (if items are odd)

Flex is a great tool for this kind of “card” style layout.

The property you want for this is justify-content

With that:-

You are adding it top and bottom. The shorthand with just two values sets the top and bottom to the first and the left and right to the second.
To add only to the top use 3 values, where the 3rd is for the bottom.
margin: 20px auto 0;
Alternatively use gap

Quick example using the default value for justify-content and gap instead of margin.
Probably needs some refinement, but it’s a start.

For semantics I also altered the section and article tags for a list.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

2 Likes

is there a way to add a 20px gap on the left and on the right of the elements as well? (what’s why I was using space-evenly)

I guess I could add padding to .store_items. Just wondered whether it should be done with flex.

Thanks

That would probably be the way, gap just goes between items.

Thanks for the clarification. Helpful.

I just stumbled on a new problem. (sorry for the silly questions just trying to figure out the limits)

If one of the containers is long, it (obviously) changes the layout

<section class="store_items">
    <article>wiiiidddeeeeeee</article>
    <article>normal width</article>
    <article>normal width</article>
....
</section>

Is there something within flex that can give them all some fix width or do I do it as normal .store_items article {width: 300px}

Flex is quite flexible, you can have fixed widths, or adaptive widths that adjust to content and available space, whatever fits your needs.

Absolutely fixed widths are generally a bad idea, but hinted at fixed widths via max-width or flex-basis are good.
The flex way is to use flex-basis which does set a width, but when used in conjunction the flex-grow and flex-shrink allows some adjustment either way if desired.

1 Like

Again thanks for your help

I have updated the pen to show this.

1 Like
flex: 300px 0 1 ;

Reading the css-tricks docs

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters ( flex-shrink and flex-basis ) are optional. The default is 0 1 auto , but if you set it with a single number value, it’s like 1 0 .

I’m guessing flex-grow:300px is max-width, the next flex-shrink:0 is min-width, what’s flex-basis?

That is setting flex-basis (sort of width) to 300px, grow is set to 0 (don’t grow), shrink is set to 1 (do shrink).
So the flex items will try to be 300px, but if space gets too tight they will shrink to fit.
If you enable grow, they will expand to fill any available excess space. Try it in the pen to see what happens.

2 Likes

Nice

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.