Hackernoon logoThe Ultimate CSS Grid Cheat Sheet in 2021๐ŸŽ–๏ธ by@joyshaheb

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

Joy Shaheb Hacker Noon profile picture

@joyshahebJoy Shaheb

Front end Developer ๐Ÿ”ฅ || Youtuber ๐ŸŽฌ|| Blogger โœ|| K-pop fan โค๏ธ๏ธbased in Dhaka, Bangladesh.

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

Check Out The YouTube Tutorial Here

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 a uniform width for all columns using "repeat()" function.

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 a uniform height for all rows using "repeat()" function.

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.


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


column-gap

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


row-gap

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


justify-items

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

align-items

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


justify-content

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


align-content

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

Children Properties

The Grid Scale

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

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๐Ÿ‘‡


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

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


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 ๐Ÿ‘‡


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 ๐Ÿ‘‡

Short Hands


place-content


place-items


place-self


grid-template


gap/grid-gap


Article Credits


Conclusion

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

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

Be sure to check out my other channels and profiles:

  1. YouTube/ Joy Shaheb
  2. Twitter / JoyShaheb
  3. Instagram / JoyShaheb
Joy Shaheb Hacker Noon profile picture
by Joy Shaheb @joyshaheb. Front end Developer ๐Ÿ”ฅ || Youtuber ๐ŸŽฌ|| Blogger โœ|| K-pop fan โค๏ธ๏ธbased in Dhaka, Bangladesh.Read my stories

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.