CodeNewbie Community

loading...
Cover image for CSS Grid Cheat Sheet Illustrated in 2021๐ŸŽ–๏ธ

CSS Grid Cheat Sheet Illustrated in 2021๐ŸŽ–๏ธ

JoyShaheb
Front end Developer ๐Ÿ”ฅ || Youtuber ๐ŸŽฌ|| Blogger โœ|| K-pop fan โค๏ธ๏ธbased in Dhaka, Bangladesh.
Originally published at dev.to ใƒป5 min read

Table of Contents :

Let's refresh Our CSS Grid Memory. Here's a Cheat Sheet of everything you can do with Grid to get started in 2021!๐ŸŽ–๏ธ

YouTube :

Grid Architecture

Grid Architecture

grid-template-columns

This is used to define the Number & Width of columns. You can either individually set the width of each column, or set an uniform width for all columns using "repeat()" function.

Alt Text

Alt Text

grid-template-rows

This is used to define the Number & Height of rows. You can either individually set the height of each row, or set an uniform height for all rows using "repeat()" function.

Alt Text

Alt Text

grid-template-areas

This is used to specify the amount of space a grid cell should carry in terms of column & row across the parent container. Life's Quite Easier With this as it allows us to see visually what we're doing.

Alt Text

Call it, the blueprint(template) of our layout๐Ÿ‘‡

Alt Text

column-gap :

This property is used to place gap between Columns inside the grid ๐Ÿ‘‡

Alt Text

row-gap :

This property is used to place gap between Rows inside the grid ๐Ÿ‘‡

Alt Text

justify-items :

This is used to position grid-items (children) inside grid container along the X-Axis[Main Axis]. The 4 values are ๐Ÿ‘‡

Alt Text

Alt Text

align-items :

This is used to position grid-items (children) inside grid container along the Y-Axis[Cross Axis]. The 4 values are ๐Ÿ‘‡

Alt Text

justify-content :

This is used to position our grid [Basically everything] inside grid container along the X-Axis[Main Axis]. The 7 values are ๐Ÿ‘‡

Alt Text

Alt Text

align-content :

This is used to position our grid [Basically everything] inside grid container along the Y-Axis[Cross Axis]. The 7 values are ๐Ÿ‘‡

Alt Text

Alt Text

Children Properties

Alt Text

The Grid Scale

Alt Text

Alt Text

grid-column : start/end

THESE 2 properties are used to join multiple COLUMNS together. It is a shorthand of grid-column-start & grid-column-end Skip to this topic on the video above if you're confused using the timestamps.

grid-row : start/end

THESE 2 properties are used to join multiple ROWS together. It is a shorthand of grid-row-start & grid-row-end
Skip to this topic on the video above if you're confused using the timestamps.

grid-area :

At first, we need to setup grid-template-areas โ˜๏ธ Once done, we have to specify the names used in parent class inside the children classes, like this๐Ÿ‘‡

Alt Text

Specifying grid-template-areas inside parent container ๐Ÿ‘‡

Alt Text

specifying the names used in parent container inside children classes with grid-areas๐Ÿ‘‡

Alt Text

Justify-self :

This is used to position 1 individual grid-item (children) inside grid container along the X-Axis[Main Axis]. The 4 values are ๐Ÿ‘‡

Alt Text

align-self :

This is used to position 1 individual grid-item (children) inside grid container along the Y-Axis[Cross Axis]. The 4 values are ๐Ÿ‘‡

Alt Text

Short Hands

Alt Text

place-content :

Alt Text

place-items :

Alt Text

place-self :

Alt Text

grid-template :

Alt Text

gap/grid-gap :

Alt Text

Credits

Credits

Read Next :

Conclusion

Here's Your Medal For reading till the end โค๏ธ

Suggestions & Criticisms Are Highly Appreciated โค๏ธ

Alt Text

Alt Text

Discussion (1)

Collapse
john_yalcin profile image
John Yalcin

Very helpful explanation and illustrations....thank you JoyShaheb!