CSS Grid Layout Generator

 
 

Grid Item

              
            

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