CodeNewbie Community

loading...
Cover image for CSS Grid Cheat Sheet Illustrated in 2021πŸŽ–οΈ

CSS Grid Cheat Sheet Illustrated in 2021πŸŽ–οΈ

joyshaheb profile image JoyShaheb 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)

pic
Editor guide
Collapse
john_yalcin profile image
John Yalcin

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