Specifying grid-template-areas inside parent container □ Skip to this topic on the video above if you're confused using the timestamps.Īt 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□ It is a shorthand of grid-row-start & grid-row-end THESE 2 properties are used to join multiple ROWS 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. THESE 2 properties are used to join multiple COLUMNS together. This is used to position our grid inside grid container along the Y-Axis. This is used to position our grid inside grid container along the X-Axis. This is used to position grid-items (children) inside grid container along the Y-Axis. This is used to position grid-items (children) inside grid container along the X-Axis. This property is used to place gap between Rows inside the grid □ This property is used to place gap between Columns inside the grid □ Life's Quite Easier With this as it allows us to see visually what we're doing.Ĭall it, the blueprint(template) of our layout□ This is used to specify the amount of space a grid cell should carry in terms of column & row across the parent container. You can either individually set the height of each row, or set an uniform height for all rows using "repeat()" function. This is used to define the Number & Height of rows. You can either individually set the width of each column, or set an uniform width for all columns using "repeat()" function. This is used to define the Number & Width of columns. Here's a Cheat Sheet of everything you can do with Grid to get started in 2021!□️
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |