CSS Grid Series: 3 - Dev Tools

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:

  1. Ctrl + Shift + i
  2. Right click the page > Inspect element

To display the grid highlighting, select the container and toggle the grid button under the 'Rules' tab.

2021-04-10_09h10_06.png

Above: Toggle grid viewer

To view just the grids, you can find them under the 'Layout' tab.

2021-04-10_09h15_27.png

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 class="item".

Grid Highlighting Settings

Colour

Depending on your design, it might be easier to switch the colour of the tracks to a light or dark colour.

2021-04-10_09h23_31.png Above: Colour pick your track colour

Display line numbers

Makes it easier to pick out where to place items.

CSS_3_withwithoutnumbers.png

Without line numbers (left); With line numbers (right)

Display grid names

Add custom names to your grid areas to make it easier to pick out where to place items.

More on this later.

Extend lines infinitely

Show where your lines would extend in the case of implicit tracks.

CSS_3_infinitelines.png

With (right) and without (left) infinite lines

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 or more than the number of columns / rows you have.

Solid lines

Start and stop of the explicit grid

Dashed diagonal lines

The area which makes up the grid-gap

Dashed lines

Defines the explicit tracks (that we specified)

i.e. grid-template-columns: 100px 200px;

Dotted lines

Defines the implicit tracks (that we didn't specify)

i.e. did not declare grid-template-rows

Line Meanings.png

Dev tools Track viewer - track lines explained. Image by Wesbos