Posted 14 days ago. Visible to the public.

Inspect and Debug CSS Flexbox and Grid Layouts by using the Layouts Tab in Dev Tools

tl;dr

In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:

  • Display size and lines along with labels
  • Changing their attributes
  • Change how overlay is colored and fastly switch nested elements in the Elements panel

This guide will only cover some example gif recordings on how to use with Grid, since it's basically straight forward to apply this for Flexbox by yourself afterwards.

For this purpose a the link to documentation and a simple code pen have been added for both use cases.

Grid

You can use this Code Pen Archive to play around with the different options.
Read Inspect Grid Archive to check for full details.

Discover The Layouts Pane to inspect

You can toggle the grid badge for every elements that has display: grid or display: inline-grid applied to it. Now the Layout Pane will have several options on how to display this element.

Image

Use the Grid Editor to debug

You can set different properties on on how the grid elements are aligned etc. directly and track their sizes with the layout display.

Image

Change Grid Overlay Behavior

When nesting several grid, you can directly grep them in the layouts tab and change the color by which they are represented.

Image

Flexbox

The functions for flexbox basically work the same way as for grid. For this reason I will only link this Code Pen Archive and encourage you to play around by yourself.

For full detail check Inspect Flexbox Archive .

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Felix Eschey
Last edit:
14 days ago
by Felix Eschey
Attachments:
Peek_2022-11-15_09-58.gif, Peek_2022-11-15_10-15.gif, Peek_2022-11-15_10-26.gif
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Felix Eschey to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more