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 of columns. You can either individually set the width of each column, or set a uniform width for all columns using "repeat()" function. Number & Width grid-template-rows This is used to define the of rows. You can either individually set the height of each row, or set a uniform height for all rows using "repeat()" function. Number & Height 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 inside the grid 👇 Columns row-gap This property is used to place gap between inside the grid 👇 Rows justify-items This is used to position grid-items (children) inside the grid container along the . The values are 👇 X-Axis[Main Axis] 4 align-items This is used to position grid-items (children) inside grid container along the . The values are 👇 Y-Axis[Cross Axis] 4 justify-content This is used to position our grid [Basically everything] inside grid container along the . The values are 👇 X-Axis[Main Axis] 7 align-content This is used to position our grid [Basically everything] inside the grid container along the . The values are 👇 Y-Axis[Cross Axis] 7 Children Properties The Grid Scale grid-column : start/end THESE 2 properties are used to join multiple together. It is a shorthand of & Skip to this topic on the video above if you're confused using the timestamps. COLUMNS grid-column-start grid-column-end grid-row : start/end THESE 2 properties are used to join multiple together. It is a shorthand of & ROWS grid-row-start grid-row-end grid-area At first, we need to setup ☝️ Once done, we have to specify the names used in parent class inside the children classes, like this👇 grid-template-areas 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 grid-item (children) inside grid container along the . The values are 👇 1 individual X-Axis[Main Axis] 4 align-self This is used to position grid-item (children) inside grid container along the . The are 👇 1 individual Y-Axis[Cross Axis] 4 values 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: YouTube/ Joy Shaheb Twitter / JoyShaheb Instagram / JoyShaheb

Instagram

Twitter

The Ultimate CSS Grid Cheat Sheet in 2021🎖️

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

CSS FlexBox Cheat Sheets for Web Developers in 2021

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

CSS FlexBox Cheat Sheets for Web Developers in 2021

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps