CSS Grid Layout Generator

CSS Grid allow us to create two dimensional layout on a web page and arrange child elements in specified row, column structure.

Two primary parts of grid layout are: Grid container and Grid item



1) Grid container - Parent element that hold all the grid items. Grid container define template area of how many rows and columns would be there. It also define size of grid cell.

<div class='angry-grid' >
 <div class='item-0'>item 0</div>
 <div class='item-1'>item 1</div>
 ...
</div>

There are multiple CSS properties available for grid container, few of them are use as a shorthand.
But the three important CSS instructions given to the browser are
a) Element is a grid container.
b) Total numbers of rows and columns are in the grid.
c) Area cover for each grid cell.

display: grid | inline-grid
grid-template-rows: px, fr, em, auto, %, minmax(), repeat()
grid-template-columns: px, fr, em, auto, %, minmax(), repeat()

2) Grid items - Child elements that inside the grid container called grid items.

<div class='angry-grid' >
 <div class='item-0'>item 0</div>
 <div class='item-1'>item 1</div>
 ...
</div>

Similarly grid item has CSS properties to fit itself into the grid cell.

Responsive Grid

To make a responsive grid, you can use fraction(fr), percent(%), auto units in the grid-template.

Other responsive option is to use @media query and redefine grid-template for multiple device breakpoints

.angry-grid {
  display: grid;
  grid-template-rows: 4rem auto 45px;
  grid-template-columns: 16rem auto;

  grid-template-areas:
   'logo header'
   'sidebar main-content'
   'sidebar footer';
 }

@media (max-width: 767px){
 .angry-grid {
  grid-template-rows: 4rem auto auto 45px;
  grid-template-columns: 16rem auto;

  grid-template-areas:
   'logo header'
   'sidebar sidebar'
   'main-content main-content';
   'footer footer';
 }
}