0

layout like this

I devide the div into two parts, and achieve with Flex Box in each part.

<!--My Trials-->
<body>
  <div>
    <div class="container1" style="display: flex;">
      <div class="item1" style="flex:1;background-color: yellowgreen;">1</div>
      <div class="item1" style="flex:1;background-color: lightseagreen;">2</div>
      <div class="item1" style="flex:1;background-color: palevioletred">3</div>
    </div>
    <div class="container2" style="display: flex;">
      <div class="item2" style="flex:1;background-color: lightskyblue;">4</div>
      <div class="item2" style="flex:2;visibility: hidden;">5</div><!-- hide the 5th div -->
    </div>
  </div>
</body>

result

I wonder how to turn each div into a square.
And Is there anyway can achive the layout without the help of the 5th div?

Zia
  • 21
  • 4

1 Answers1

0

.container {
    display: flex;
    flex-wrap: wrap;
}

.item1 {
    height: 100px;
    width: 33%;
    background-color: lightblue;
    color: black;
}

.item2 {
    height: 100px;
    width: 33%;
    background-color: lawngreen;
    color: black;
}

.item3 {
    height: 100px;
    width: 33%;
    background-color: pink;
    color: black;
}

.item4 {
    height: 100px;
    width: 33%;
    background-color: orange;
    color: black;
}
<body>
    <div class="container">
        
        <div class="item1">This is square 1</div>

        <div class="item2">This is square 2</div>

        <div class="item3">This is square 3</div>

        <div class="item4">This is square 4</div>

    </div>
  </body>

The flex-wrap property allows elements to move to the next row when there is no more space on the current row. Making it completely responsive. And the width property is set to take up 33% of the view port window at all times.

Let me know if that works or if you need help with anything.

Jason Sturch
  • 16
  • 5