Welcome to part-2 of the series. You can find part-1 here.

Let me start with the dev tools which are really beneficial for development in Grid. By the time of writing, still Firefox developer edition have the best tool to auto-detect Grid.

Grids are a very visual thing and there are implicit track and explicit track, which are shown beautifully in latest Firefox developer edition.

Let use the codepen from last tutorial to demonstrate this.

I have opened the codepen and then right-clicked and Inspect Element on Firefox developer edition, to show me the developer tools. This is similar to the developer tool of Chrome or other browser, but have an additional section on the right side. Notice there is a Layout and that is the main tool to work in Grid.

Image for post
Image for post
Firefox Developer Edition

You can read the rest of the article from my site. The link for the same is below.

You can find part-3 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store