# CSS Grid Series: 3 - Dev Tools


> *Live dev notes taken throughout the CSS Grid course by Wesbos —  [cssgrid.io](http://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](https://cdn.hashnode.com/res/hashnode/image/upload/v1618437221716/hmdjyQUFO.png)

*Above: Toggle grid viewer*


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


![2021-04-10_09h15_27.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618437258903/-7tiUVrNF.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1618437331735/RIh_fneum.png)
*Above: Colour pick your track colour*

## Display line numbers

Makes it easier to pick out where to place items.

![CSS_3_withwithoutnumbers.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618437368592/rpD_ZRTs0.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1618437772786/snO-Pww1O.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1618437917916/NcAPSw-pX.png)

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