Use of CSS subgrid in replacement of CSS flexbox

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;
}

Leave a comment

Your email address will not be published. Required fields are marked *