This is an overview for flex / grid within CSS.

Made by phiewter — Built with Next.js

Introduction

First, run the development server:

npm run dev

Open http://localhost:3000 or with your browser to see the result.

For indiviual changes you can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Learn More

To learn more about flex / grid, take a look at the following resources:

• CSS-Tricks - A Complete Guide to Flexbox - A comprehensive guide to CSS flexbox layout.
• Josh Comeau - An Interactive Guide to Flexbox
• Mozilla - Flexbox - MDN Web Docs

You can check out phiewter's GitHub repository - your feedback and contributions are welcome!

Practice

Not satisfied yet? Start practicing!

The easiest way to learn is by applying your learned concepts.

Check out Flexbox Froggy for an interactive CSS game about: flex

or

Check out Grid Garden for an interactive CSS game about: grid