DevTools Tips

Tweak css grid and flexbox alignment properties

Categories: Supported by:

Chrome and Edge both have a visual editor useful for tweaking flexbox and grid alignment properties.

  • Head over to the Elements panel
  • Select an element that is either a grid or flexbox container
  • In the Styles sidebar pane, find the display: grid or display:flex declaration
  • Click the little icon next to this declaration

The grid editor in the Styles pane of Microsoft Edge.