Flex box grid that fits to parent

Question

I'm trying to have a list of items that wrap to the container size. I want the container to have a different background colour than the page background.

The code below isn't doing what I want.

An image is going to say so much more. This is what I'm after:

body {
  background-color: grey;
  margin: 0;
  font-family: Arial;
}

.text { color: white; }

.wrapper {
  display: flex;
  justify-content: center;
}

.content {
  padding: 10px;
  background-color: green;
}

.listings {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}


.item {
  width: 100px;
  padding: 15px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
  margin: 15px;
}

<body>
  <div class="wrapper">
    <div class="content">
      <div class="text">Just some text that should wrap and resize. More text blah blah.</div>
      <div class="listings">
        <div class="item">Listing 1</div>
        <div class="item">Listing 2</div>
        <div class="item">Listing 3</div>
        <div class="item">Listing 4</div>
        <div class="item">Listing 5</div>
      </div>
    </div>
  </div>
</body>

score -1 · Answer 1 · answered Feb 18 '20 at 01:06

If it's a grid layout, why not just use grid instead?

body {
  background-color: grey;
  margin: 0;
  font-family: Arial;
}

.text { color: white; }

.wrapper {
  display: flex;
  justify-content: center;
}

.content {
  padding: 10px;
  background-color: green;
}

.listings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}


.item {
  padding: 15px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
  margin: 15px;
}

<body>
  <div class="wrapper">
    <div class="content">
      <div class="text">Just some text that should wrap and resize. More text blah blah.</div>
      <div class="listings">
        <div class="item">Listing 1</div>
        <div class="item">Listing 2</div>
        <div class="item">Listing 3</div>
        <div class="item">Listing 4</div>
        <div class="item">Listing 5</div>
      </div>
    </div>
  </div>
</body>

Because I want to extend the grid to whatever will fit on the screen. Sorry, my fault for not being specific. — Joshua Jenkins, Feb 18 '20 at 05:25
Oh, there's an auto-fit setting with grid. Happy days. I tried the grid but got stuck because I didn't see this. Thanks for putting back on the right path. — Joshua Jenkins, Feb 18 '20 at 05:28

Flex box grid that fits to parent

1 Answers1