Search code examples
cssflexboxcss-grid

CSS: Is it possible to achieve the following layout?

Is it possible to achieve the following responsive design layout shown in the image below using CSS3 Flexbox? I am able to achieve the desktop layout using the code below. However, I can't think of a way to make div #div3 and #div4 fill below #div1 and #div2

enter image description here

EDIT: I'm sorry that I forgot to mention that it is not restricted to CSS Flexbox only, and it seems like the grid solution would be more flexible so I will just mark it as the accepted answer. Thanks for the help guys!

My code

#div1 {
  background-color: red;
  width: 100px;
  height: 100px;
}

#div2 {
  background-color: green;
  width: 100px;
  height: 100px;
}

#div3 {
  background-color: orange;
  width: 100px;
  height: 100px;
}

#div4 {
  background-color: blue;
  width: 100px;
  height: 100px;
}

.container,
#flex-container {
  display: flex;
}

#flex-container {
  flex-direction: column;
}
<!DOCTYPE html>

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="test.css">
</head>


<body>

  <div class="container">
    <div id='div1'></div>

    <div id="flex-container">
      <div id='div2'></div>
      <div id='div3'></div>
      <div id='div4'></div>
    </div>
  </div>

</body>

</html>

Solution

  • Using grid in this case would make it much easier.

    Every div here has a grid-area set to some value that is used to indicate how it should behave in the grid according to layout rules defined in .container grid-template-areas every string there defines one row in the grid. The grid-template-rows and grid-template-columns are used to define number of rows and columns

     * {
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      margin: 0;
    }

    #div1 {
      background-color: red;
      width: 100%;
      height: 100%;
      grid-area: div1;
    }

    #div2 {
      background-color: green;
      width: 100%;
      height: 100%;
      grid-area: div2;
    }

    #div3 {
      background-color: orange;
      width: 100%;
      height: 100%;
      grid-area: div3;
    }

    #div4 {
      background-color: blue;
      width: 100%;
      height: 100%;
      grid-area: div4;
    }

    .container {
      display: grid;
      height: 100%;
      grid-gap: 10px;
      padding: 10px;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas: "div1 div2" "div3 div3" "div4 div4";
    }

    @media (max-width: 768px) {
      .container {
        grid-template-areas: "div1 div2" "div1 div3" "div1 div4";
      }
    }
    <div class="container">
  <div id='div1'></div>
  <div id='div2'></div>
  <div id='div3'></div>
  <div id='div4'></div>
</div>