This repository contains tutorial of css grid concepts and collection of various web page layouts using css grid. Please note that CSS Grid is another tool in your toolbox and is not replacing other tools. Use right tool for right job and don't forget to keep it simple!
In general you want to use CSS Grid tool for page layout and other tools like flexbox for aligning items inside the layout.
CSS Grid allows you to specify layout in 2D (instead of e.g. flexbox that is 1D). This means you don't need extra wrappers, containers and rows to build wanted layout so your html code is simpler and easier to maintain. Simple is good.
Also look after css grid functionality in your favorite css framework (e.g. bootstrap), sooner or later all libraries will transform to use css grid for building layouts. Eventualy you might find more effective to build layouts by yourself and use lightweight css component library for styling buttons, menus, shadows, etc instead of using heavyweight css framework.
If you are new to CSS Grid start with 01-basic-concepts.
Open each file in browser and play with code. There is documentation included in the source code including more examples to play with.
Watch basic concepts live preview on codepen:
- 01-plain-grid.html
- 02-columns-px-unit
- 03-columns-fr-unit
- 04-columns-unequal-sizes
- 05-repeat-colums
- 06-repeat-columns-multiple
- 07-rows
- 08-rows-explicit-implicit
- 09-auto-rows-size
- 10-auto-rows-full-screen
- 11-rows-minmax
- 12-rows-minmax-all-same-size
- 13-grid-lines-basics
- 14-grid-lines-continued
- 15-grid-lines-shorthands
- 16-gaps-between-cells
- 17-nested-grid
- 18-overlapping
Watch layouts line preview on codepen:
Each directory contains different layouts with multiple examples. In first directory you will find tutorial for css grid itself. Just open html files in your browser, you don't need a http server to play with examples, it's pure css. Look after extra examples in code that are commented out, try to uncomment and have fun!
In case you're using Visual Studio Code I recommend to use Live preview extension or any of your favorite html preview server.
In case of Live review right click on the file in the Explorer and click Live Preview:Show Preview. I recommend to create shortcut Alt+E to preview current file inside editor and Ctrl+Alt+E to preview in external browser.
You configure shortcuts using Ctrl+K+S and type Live preview in search.
Do not hesitate to submit a merge request if you have found an error, better concept or new layout idea.