Today, we’re going to learn about CSS grid through one of the most iconic franchises of all time.

Here we go!

display: grid; 

Grid Row and Grid Column

grid-template-columns: 1fr 1fr 1fr; //divided up equally 


To make things simpler, CSS grid has shorthand options. First, to declare a grid layout on the parent container, you present rows, then subsequent columns separated by a ‘/’

grid: 50% 50% / 33.3% 33.3% 33.3%;
grid-template-columns: repeat(3, 33.3%); 
grid-template-rows: repeat(2, 50%);
grid-template-rows: 50% repeat(2, 25%);//would be the same as 
grid-template-rows: 2fr 1fr 1fr;
grid: repeat(2, 50%) / repeat(3, 33.3%) //2 rows with 50% and 3 columns with a third 
grid-column: 3 / 4; 
grid-row: 1 / 3; 
grid-area: 1 / 3 / 3 / 4//is the same as 
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;

Grid Auto-Flow — row (default), column, dense

Grid Template Areas

You can indicate specific areas of your grid with names.


Creates minor separation between the grid areas — a simple alternative to margin or padding.

grid-row-gap: 2rem; 
grid-column-gap: 1rem;

Auto-Fit and Auto-Fill

These keywords allow you to control the grid in different ways. Auto-fit allows you to repeat a specified element size until it fills up the grid container.

grid-template-columns: repeat(auto-fit, 100px);