[Solved] Center 4 quadratic (1:1) divs in one big quadratic div? [closed]

by


Use CSS-Grid to make the grid layout with equal split

body{
  margin:0;
}
.parent{
    position: fixed;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background-color: green;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 10px;
  
}
.child{
  background-color:white;
}
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>

Flex Method:-

Works in most of the modern browsers

You can also use flexbox to make it a quadrant split grid using flex-direction: row;

body{
  margin:0;
}
.parent{
    position: fixed;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background-color: green;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;  
}
.child{
  background-color:white;
  width:calc(50% - 5px);
}
.child:nth-child(odd){
  margin-right:10px;
}
.child:nth-child(n+3){
  margin-top:10px;
}
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>

solved Center 4 quadratic (1:1) divs in one big quadratic div? [closed]