Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Layout Lens for CSSNew to Visual Studio Code? Get it now.
Layout Lens for CSS

Layout Lens for CSS

Preview

th3pool

|
26 installs
| (0) | Free
Highlight Flexbox and Grid properties in your CSS, SCSS, and LESS files.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

FlexGrid Decorator

License: MIT

Better visualization of CSS Flexbox and Grid properties, color-coded for easy identification of containers and children, including shared properties.

Features

Rule of thumb:

  • Blue background = is a flexbox property
  • Red background = is a grid property
  • Yellow background = is a shared property (flexbox & grid)
  • Dotted border = is a container/parent property

Example

Usage

  • Open any CSS, SCSS, or LESS file.
  • The extension automatically highlights flex/grid properties according to the above scheme.
  • Shared properties (align-items, justify-content, etc.) are highlighted in yellow.

Why did I made this extension?

I often find myself confused about whether a property applies to flexbox or grid, so I created this extension to help me quickly identify them while coding. Feel free to use it if you find it helpful!

Extension Settings

  • layoutLens.enableCommon: Toggle the visibility of shared properties among flex and grid (default: false).
  • layoutLens.enableFlexbox: Toggle the visibility of flexbox properties (default: true).
  • layoutLens.enableGrid: Toggle the visibility of grid properties (default: true).

This extension is available on

  • Visual Studio Code Marketplace
  • Open VSX Registry

Icons

The terrific icon used in this extension was made by me, and I hereby release it into the public domain. Feel free to use it for any purpose, if you have a better one, please open a PR.

Change Log

All notable changes to the "layout-lens" extension will be documented in the file CHANGELOG.md.

Known Issues

Please report any issues or feature requests on the GitHub repository.

License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft