In making any website responsible every alignment is being consider
To align contents in grid we need maintain equal height
when we use flex box to align grids height will be vary according to contents inside
In order to make it align in propper manner in place of flexbox css subgrid can be used to make content very responsive
Sample code for using subgrid is been shown when we have 3 grids
Ex:
.container {
width: 500px;
height: 500px;
background:black;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
.container div {
background: white;
grid-row: 2/ 3;
grid-column: 2 / 5;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}