Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io
Tracks are considered “untouchable” because they aren’t the same as elements in a html page.
But we can inspect them as we build our grid(s)— through dev tools.
Two ways to open the inspector:
- Ctrl + Shift + i
- Right click the page > Inspect element
To display the grid highlighting, select the
container and toggle the grid button under the ‘Rules’ tab.
To view just the grids, you can find them under the ‘Layout’ tab.
The reason why there are “items” shown in the list is because the base CSS file by default has
display: grid on any element with
Grid Highlighting Settings
Depending on your design, it might be easier to switch the colour of the tracks to a light or dark colour.
Display line numbers
Makes it easier to pick out where to place items.
Display grid names
Add custom names to your grid areas to make it easier to pick out where to place items.
Extend lines infinitely
Show where your lines would extend in the case of implicit tracks.
How to read tracks
The tracks are not numbered by the column, but rather the lines that start and stop them. So you’ll always have a count of one more than the number of columns / rows you have.
Start and stop of the explicit grid
Dashed diagonal lines
The area which makes up the
Defines the explicit tracks (we specified)
grid-template-columns: 100px 200px
Defines the implicit tracks (we didn’t specify)
i.e. did not declare