CSS Grid Layout Generator

 
example - 1fr, 20px, 10%, auto, repeat(2, 100px), minmax(20px, auto)
 
required - grid or inline-grid
optional - grid gap in pixel

Grid Item

example: header, side-navbar

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

Grid containerGrid ContainerGrid CellColumnsRowsGrid ItemGrid Item1234512341px, fr, % etc

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

resources