'Responsive CSS with two columns, second one two rows

I would like to make a responsive table layout with DIVs that has two columns and the second column is split into two equal rows so it looks like this.

Text

htmlcssresponsive-designnode.jsethereumweb3web3jsopensea


Solution 1:[1]

Would be nice to see your attempt of doing it yourself. You can use CSS grid to build responsive layouts:

<html>
  <div class="grid">
    <div class="left">

    </div>
    <div class="right-up">
    </div>
    <div class= "right-down">

    </div>
  </div>
</html>

CSS:

.grid {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  grid-template-columns: 50vw 50vw;
  grid-template-rows: 50vh 50vh;
  grid-template-areas:
  "left right-up"
  "left right-down";

}

.left {
  grid-area: left;
  background-color: blue;
}
.right-up {
  grid-area: right-up;
  background-color: green;
}
.right-down{
  grid-area: right-down;
  background-color: red;
}

JSfiddle: JSfiddle link

Solution 2:[2]

You can use CSS Flex with flex: 1 and flex: 2

.container {
  display: flex;
  width: 100%;
  height: 300px;
  flex-wrap: wrap;
}
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.button {
  flex: 1;
  color: white;
}

.button.rowspan {
  flex: 2;
}
<div class="container">
  <div class="column">
    <div class="button rowspan" style="background: red;">
      Column 1 - rowspan
    </div> 
  </div>
  <div class="column">
    <div class="button" style="background: green">
      Column 2
    </div>
  
    <div class="button" style="background: orange">
      Column 3
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Damjan Ostrelic
Solution 2 Dickens A S

Related Questions