Search code examples
htmlcssflexboxgridcss-grid

Container with 3 div's, using Flex-box/Grid

Basicly what I want is 3 divs. One rectangle above and 2 small squares lined next to each other, below that.

Who can help me with this? In below code, I can create 3 squares. But there's 2 at the top, 1 at the bottom.

But I want one rectangle that's above the lower 2 smaller squares. If that makes sense.

[------------------]

[---] ]---]

 <section class="story story--spaceous">
  <div class="hero__compact-inner">
          <div class="grid">
            <div class="grid__row">
              <div class="grid__col">
                <h2 class="hero__subtitle">
                  Laag 6: Endpoint Security
                </h2>
                <p class="story__intro">
                  Antivirussystemen zorgen voor de optimale veiligheid binnen jouw organisatie. Het regelmatig updaten hiervan verkleint de risico's en kalamiteiten.
                  </p>
                  <div class="flex-container-3-status">
                    <div class="status-dashboard">Status dashboard rechthoek</div>
                    <div class="chart--donut">Donut Diagram Algemene Score</div>
                    <div class="action-list box-50">Actielijst</div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
</section>

CSS:

.flex-container-3-status{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.flex-container-3-status> div{
  flex: 0 40%;
  height: 300px;
  width: 300px;
  margin-top: 45px;
  border: #fff solid;
  box-sizing: border-box
}
Solution

  • You have 4 divs in the flex container. Define the flex-basis property for the first div as:

    .flex-container-4 > div:first-child {
  flex-basis: 100%;
}

    This will make the first div span 100% of the width and the rest of the divs will align themselves in the next row.

    You may also need to adjust the flex: 0 40%; declaration for your .flex-container-4 > div, accordingly. flex: 0 50%;, if you have 2 more divs remaining, or flex: 0 33.33%;, if there are 3 divs remaining (as your code suggests).