Skip to content

Plain CSS design tutorials including grid, flex, app layouts, design system, vue and more.

Notifications You must be signed in to change notification settings

besnik/css-design-tutorial

Repository files navigation

CSS Grid Tutorial

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!

When to use CSS Grid

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.

How to use this repository

Learning CSS Grid basics step by step

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:

Watch layouts line preview on codepen:

Learning CSS Grid layouts

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!

Visual Studio Code setup

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.

Have a new idea?

Do not hesitate to submit a merge request if you have found an error, better concept or new layout idea.

About

Plain CSS design tutorials including grid, flex, app layouts, design system, vue and more.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published