The css-grid's intro from wongprom

css-grid's Introduction

Todays topic: CSS-Grids

Nice to haves: Google Chrome (browser) have now implemented its own grid viewer to show the lines of the grid if the container is hovered with the console open. But Chrome also has a nice extension that you can add called Gridman that you can toggle on and off to show the gridlines and names if using grid-template-areas..

FireFox Developer Edition has got a great built-in tool for working with CSS Grids. As with Chrome, if you open the console you can toggle the grid
container to permanently show the lines until toggled of again.

Some good articles about CSS Grid:

CSS-tricks
https://css-tricks.com/snippets/css/complete-guide-grid/

Become a Css-grid ninja
https://medium.com/@elad/becoming-a-css-grid-ninja-f4c6db018cc1

Breaking down Grid Layout
http://csskarma.com/blog/css-grid-layout/

Auto-fit vs. Auto-fill
https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

Wes Bos free CSS Grid online course (some of the content in todays exercises are inspired from here)
https://cssgrid.io/

Learn CSS Grid
https://learncssgrid.com/

Exercises:

The exercises are seperated into different levels of difficulty, 1 being the easiest and 5 the hardest.
Try do the exercises without looking at the finished version, and if you need any help just ask any of
the instructors or check out the CSS-tricks article above.

Apart from the exercises in this repository, here are some other amazing tools to help you learn CSS Grid:

Gridgarden
A free, 28 level online game that starts out with the basics and gets really challenging at the end. And great 
game and a great recommendation!
http://cssgridgarden.com/

Gridcritters
Also an online game like Gridgarden, BUT! it costs $129.
https://www.gridcritters.com/

Fisken:
    20x15 grid
        4 blå
        1 svart
        107 gula
        188 vita

Batman:
    31x21
        172 gula
        479 svarta

Recommend Projects