I played all 28 levels of the Grid Garden game and started our Grid Challenges assignment feeling pretty confident, only to get completely humbled!
I had to restart Challenge 5 three times, even though I was following the instructions. Don’t get me wrong, I love grids! I don’t understand them yet, but I already love them.
They offer so many great options for designing layouts. Now I just have to learn about all those options and how they work!
To expand my knowledge, I read The Difference Between Explicit and Implicit Grids by Manuel Matuzovic. Matuzovic explained that explicit grids are defined by the developer and have a fixed number of lines and tracks. Implicit grids automatically expand when items overflow the grid’s existing rows or columns.
Developers use properties to determine if a grid is explicit, implicit, or a mix of both. For example:
Grid-template-rows or -columns create explicit grids by defining a fixed number of lines and tracks.
Grid-auto-rows or -columns create implicit grids because they expand automatically when items overflow. However, we can still define the width and height of the cells.
Grid-auto-flow allows us to determine if the overflow will create a new column or a new row.
Grid-template-area can be explicit or partially implicit, depending on what rules you assign it. If you specify the number of grid lines, it’s explicit. If you place a grid item outside the grid’s boundaries, the browser will generate grid lines around the item, making the grid partially implicit.
I look forward to learning even more about grids in the coming weeks!