5. Reflect: 3 Key Learnings
After building the Galaxy layout with CSS Grid, I took a moment to reflect, just like in any good design process. Looking back helped me identify what worked, what surprised me, and what I’d do differently next time. Here are three insights that stood out:
① Implicit grid vs Explicit grid
- An implicit grid is automatically generated by the browser when items extend beyond the defined structure.
- An explicit grid is one you define manually using
grid-template-columnsandgrid-template-rows.
Understanding the difference helps you take full control of your layout.
👉 Watch: Wes Bos — Implicit vs Explicit Tracks
② How height works in CSS
The height CSS property specifies the height of an element. By default, the property defines the height of the content area. –MDN
The height property controls an element’s vertical size.
By default, it matches the height of the content inside.
- No content = no height
- 100px content = 100px height
③ fr units need explicit height
💡 Height doesn’t update automatically like width does.
Unlike columns, which adjust to screen width, rows using fr units don’t respond the same way. If the container has no defined height, the browser can’t calculate row heights, causing layout issues like the one shown below.
fr units need explicit heightThe browser can’t calculate row heights, which can cause the layout to break unexpectedly, as shown bwhelow.
Whereas, even if there is no explicit width value in the block-level element specified, the browser automatically calculates the width value of the element by the browser size.
For this reason, if you wanted to use fr unit in the grid-templage-rows property and takes up the entire height of the screen, you should put an explicit height on the container.
fr unit in the grid-templage-rows property and takes up the entire height of the screen.container {
height: 100vh;
grid-template-row: repeat(6, 1fr);
}