2

Sorry for the confusing title. Couldn't come up with a better. Anyway, I would like to list items in a grid. Think products in a webshop. Each item will be a fixed width and fixed height, but the number of items can change. The end goal is to make everything responsive so it will look good both on mobile and desktop.

This is my code:

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
            .container {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 1rem;
                background-color: #ffaa00;
                margin-left: auto;
                margin-right: auto;
                width: 90%;
            }
            
            .item {
                width: 15rem;
                height: 15rem;
                background-color: #0088ff;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
    </body>
</html>

Everything is looking as expected, but I want the items that wraps (if the numbers of wrapped items are not equal to a "full" row) to be aligned to the left - not the center. But I still want all the items in a "full" row to be aligned to the center. I'll include some pictures to clarify it.

This is what I get: enter image description here

This is what my goal is: enter image description here

If I set "justify-content: left" all items will be aligned to the left, that's not what I want either...

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
irrbloss
  • 207
  • 2
  • 9
  • 1
    Does this answer your question? [How to center a flex container but left-align flex items](https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items) – Leo the lion Mar 15 '23 at 09:42

1 Answers1

2

This should work :

<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <style>
      .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        background-color: #ffaa00;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        padding: 10px;
      }

      .item {
        height: 15rem;
        background-color: #0088ff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

So, i used display grid, because in your case, you want to handle responsive and you can handle it better with display grid.

This is the property grid-template-columns which makes the main job. I also added a padding in your container to keep the orange space between the blue items.

I hope I helped you !

McFly
  • 66
  • 4
  • Thanks, as long as it works as I want I don't care if it's flexbox or grid! :) – irrbloss Mar 15 '23 at 09:38
  • Yes, this should perfectly work, and the responsive will be just fine, if the code works for you, you can validate my anwser to let know other people that my code works ! – McFly Mar 15 '23 at 09:42