0

I'm trying to set up a grid of boxes (divs) that fit the width of the parent. When the number of boxes is in multiples of three, it looks great. This is because I've used justify-content: space-between.

However, when I have say five boxes, because of justify-content, the second row of two boxes has a box on the left and a box on the right, instead of a box on the left and box in the center. This of course is because of justify-content: space-between. When I remove justify-content: space-between, the boxes no longer fit the width of the parent.

Using Flex, how can I fit the boxes to fit the width of the parent and stay wrapped when there are rows that do not have three boxes? Here's my Codepen. I also pasted my latest effort below.

Codepen

HTML

  <div class="row text-center">
    <div class="col-12 text-center">
      <div class="doc-details-grid-wrapper">
        <div class="doc-details-title">
          <h4>Section 1</h4>
          <hr>
        </div>
        <div class="doc-details-grid">
          <a href="" class="box box1 callout">
            <h5>Title goes here</h5>
          </a>
          <a href="" class="box box2 callout">
            <h5>Title goes here</h5>
          </a>
          <a href="" class="box box3 callout">
            <h5>Title goes here</h5>
          </a>
          <a href="" class="box box4 callout">
            <h5>Title goes here</h5>
          </a>
          <a href="" class="box box5 callout">
            <h5>Title goes here</h5>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

h5 {
  color: #fff;
}
.doc-details-grid {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        margin: 10px 0 50px;
        min-height: 200px;
    }
    
    .doc-details-grid>a {
        background-color: #2A88A6;
        display: flex;
        flex-basis: calc(100% - 30px);
        justify-content: center;
        flex-direction: column;
    }
    .doc-details-grid>a:hover {
        background-color: #136A85;
    }
    .doc-details-grid h5 {
        padding-bottom: 0;
    }  
    .doc-details-grid>div>div {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }
    .box {
        margin: 10px;
        border-radius: var(--bs-border-radius-lg)!important;
    }
    @media (min-width: 768px) {
        .doc-details-grid>a {
            display: flex;
            flex-basis: calc(33% - 40px);
            justify-content: center;
            flex-direction: column;
        }
    }
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
linnse
  • 415
  • 4
  • 21

1 Answers1

0
justify-content: space-between

Does not in any way affect how the items fit the width of the parent, not sure what you mean by that. Removing it solves the issue and keeps the boxes contained in the parent.

E-g
  • 524
  • 2
  • 12
  • Removing "justify-content: space-between" causes the div of boxes to become much narrower than the parent and not quite reach the right edge of the parent. – linnse Oct 05 '22 at 14:21