CSS grid introduction

A very quick introduction to CSS Grid. (A method for responsive web design)

1. Define a wrapper div (<div class=”wrapper”>)
2. Within the wrapper div place the item div’s (<div id=”box1″>1</div>)
3. CSS for the grid. Define the column widths (grid-template-columns) and row hights (grid-template-rows)
4. CSS for the items. Define the column start (grid-column-start) and end (grid-column-end) numbers
5. CSS for the items. Define the row start (grid-row-start) and end (grid-row-end) numbers

You can also define the grid-row and grid columns like this:
gird-column = 1 / 4;
grid-row: 2 / 4;

Reference: Learn CSS Grid in 5 Minutes by Per Harald Borgen

Next steps: Do the CSS grid course create by Per Harald Borgen (14 videos – about 1 to 2 hours)

Supporting articles: 

• Want to learn CSS Grid? Here’s my free full-length course. Merry Christmas!
• How to prototype websites quickly with CSS Grid

See the Pen CSS Grid example by Dom (@Domdom787) on CodePen.