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

YouTube

Read My Stories

Too Long; Didn't Read

Web Development & Ecommerce Writing Contest

The Ultimate CSS Grid Cheat Sheet in 2021🎖️

Too Long; Didn't Read

People Mentioned

Companies Mentioned

@joyshaheb

RELATED STORIES