https://idea-hack.com/blog/34383/
I understand this! A cheat sheet for learning how to use CSS Grid and Flexbox, game summary

I understand this! A cheat sheet for learning how to use CSS Grid and Flexbox, game summary

In this article, we introduce how to use CSS Flexbox and Grid to create your favorite layout, how-to guides, cheat sheets, games, etc.

It is useful for learning new CSS properties like a game, or useful when you forget how to write, and some tools allow you to create your preferred layout online. Everyone can start immediately with this.

CSS Grid How-to Guide, Cheat Sheets, Game Summary

Grid Garden

You can learn grid properties along with the game of cultivating your farm while watering the carrots.

Grid Garden

Bonus-CSS Diner

User will solve issues about layouts by coding in this game. In addition to CSS Grid, you can learn how to compose Flexboxes and other CSS layouts that you often use.

Bonus-CSS Diner

Grid by Example

A collection that allows you to see sample examples and code, from primary usage of CSS Grid properties to difficult things such as subgrids. Useful when the layout you want to make is confirmed.

Grid by Example

Grid Visual Playground

A cheat sheet that allows you to check the color of the pre-designed colorful grid layout while changing various property values in real-time.

Grid Visual Playground

CSS Grid Generator

An online generator that allows you to create your custom grid system for your project.

CSS Grid Generator

CSS Grid Layout Generator

An online generator that allows you to create grid templates on a browser.

CSS Grid Layout Generator

CSS Tricks’ A Complete Guide to Grid

Not only for people who are starting CSS Grid, but you can also use a cheat sheet like a way to check the usage of all grid properties in one place.

CSS Tricks’ A Complete Guide to Grid

GRID: A simple visual cheatsheet for CSS Grid Layout

Not only the visual usage of each property of CSS Grid is summarized, but also the point that you can copy/paste with a click is good.

GRID: A simple visual cheatsheet for CSS Grid Layout

How to use CSS Flexbox, cheat sheet, game summary

Flexbox Froggy Game

Go up to level 24 in the game where you move the frog over a lotus leaf while entering the various properties of CSS Flexbox.

Flexbox Froggy Game

Flexbox Defense Game.’

Entering Flexbox Properties is a game that blocks the oncoming enemies, and you can experience all the properties by going to level 12.

Flexbox Defense Game.’

Visual Guide to CSS3 Flexbox

A visual guide that lets you use the Flexbox properties to create your favorite layouts, as you add or subtract grids, rearrange them, and more.

Visual Guide to CSS3 Flexbox

Flexbox playground

You can see how the placement changes as you set the various flexbox properties.

Flexbox playground

Flexplorer

A playground where you can create layouts while trying out CSS modules using flexbox. Layout can be made intuitively with only button operation.

Flexplorer

Solved By Flexbox

Solved By flexbox is a library that summarizes layouts that can be solved using flexbox. Centering on the center and the center, with the flexbox, is focused on easy styling.

Solved By Flexbox

Flexbox Patterns

It has practical code samples that arrange more complex layout patterns such as tabs and cards.

Flexbox Patterns

CSS tricks Guide to Flexbox on CSS tricks

If you forget the flexbox properties every time, it’s a good idea to check on the cheat sheet. All the information is put together and convenient.

CSS tricks Guide to Flexbox on CSS tricks

Flexbox Cheatsheet By Yoksel

A cheat sheet where you can check the sample code and layout by clicking each property prepared for the left saturation. It is useful to bookmark things that you can easily use.

Flexbox Cheatsheet By Yoksel