Responsive Flexbox with columns/rows

Question

I'm trying to create a somewhat complicated flex box with rows and columns that span the full width or height of other divs.

For example, this is my general HTML:

<div class="container">
    <div class="top"></div>
    <div class="top-left"></div>
    <div class="bottom-left"></div>
    <div class="right"></div>
</div>

What I would like for large screens:

For Mobile Screens:

I can figure out the mobile styles on my own, it's the larger view I'm having trouble with because it has a row (.top) that spans the full width of the container and then another row (.right) that spans two columns (.left-top and .left-bottom).

This is not really achievable with flexbox without modifying your HTML structure to wrap certain components, i.e. Top-Left & Bottom-Left, in another div. CSS Grid is what you are looking for. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template — Nam Kim, Dec 18 '19 at 23:08
I do not think the duplicate can help you since top is to be spanning through 2 columns, you need grid : example with a mobile first approach : https://codepen.io/gc-nomade/pen/PowWXeG You can vote to reopen the question if you think the duplicate useless here . — G-Cyrillus, Dec 19 '19 at 00:21

score 1 · Answer 1 · answered Dec 18 '19 at 23:22

You can use display:grid for it.

.top { grid-area: header; }
.top-left { grid-area: topLeft; }
.bottom-left { grid-area: botLeft; }
.right { grid-area: rightSide; }

.container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'topLeft topLeft topLeft topLeft rightSide rightSide'
    'botLeft botLeft botLeft botLeft rightSide rightSide';
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}

.container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media (max-width:768px){
  .container{
      grid-template-areas:
    'header header header header header header'
    'topLeft topLeft topLeft topLeft topLeft topLeft'
    'botLeft botLeft botLeft botLeft botLeft botLeft'
    'rightSide rightSide rightSide rightSide rightSide rightSide';
  }
}

<div class="container">
    <div class="top">1</div>
    <div class="top-left">2</div>
    <div class="bottom-left">3</div>
    <div class="right">4</div>
</div>

Responsive Flexbox with columns/rows

1 Answers1