This repository contains the exercices and there solutions of the talk about CSS Grid that Belighted add on the 14th of March 2018.
You can fork it, make pull request and add you own exercice to it.
npm install or yarn install
npm start
I'm using firefox deveveloper edition for the grid support but you can use any browser, it's going to work (expect for IE 😟).
Basic introduction about the concept of CSS Grid. We created a simple grid with a few columns and rows in it. We also putted a gap to it to show how to create gutter easily.
Exercice about sizing an element inside the grid.
Exercice about placing an element inside the grid.
Exercice about placing the content of a grid item.
Introduction to the grid areas. How to create one, how to place an item in it. Basic with header, sidebar, content and footer.
Mix the grid area with the ability to use responsive design easily.
All the things that we saw in the other exercices combine in one. You can grab the layout in the sketch file attached to it.
You will find some bonus like a way of doing masonry, overlap item, do RTL layouts and some responsive without any media queries.