Dev Tips: DevTools: Using the CSS Grid & Flexbox Editor

Dev Tips

 

DevTools: Better Debugging with the CSS Grid & Flexbox Editor  ✨


Hey friends. I took a break from emailing for a while, but I'm grateful to have you all here, part of this amazing Dev Tips community!
 


Introduction

The CSS flexbox and grid editor within Chrome DevTools helps you preview and modify a CSS flexbox layout and grid layout on a web page. This is useful for debugging layout problems, and experimenting with new layout techniques.


How to use this feature

  1. Using DevTools, inspect an element with display: flex / display: grid (example page).
  2. Click the Open Grid / Flexbox Editor icon within the Styles Pane (it's right next to the display property in the Styles Pane).
  3. You can select icons to enable any of the following:
    • align-contentcenter / space-between / space-around / space-evenly / stretch
    • justify-contentcenter / start / end / space-between / space-around / space-evenly
    • align-itemscenter / start / end / stretch / baseline
    • justify-itemscenter / start / end / stretch
  4. Observe the changes you make are reflected instantly.

When you select the various layout properties and values from the flexbox/grid editor, DevTools inserts the relevant style into the Style Pane.


Bonus feature

There is a handy CSS grid inspector (different to the grid editor) which you can access from the Elements Panel:

  1. Locate a DOM element using display: grid in the Elements Panel.
  2. Click the label/badge marked grid (located next to the element tag name).

Once you have enabled the Grid Inspector, an overlay appears on the web page to visualise the position of grid lines and tracks.

There's also a Layout Pane in the Elements Panel, you can use it to customise options for the CSS grid inspector and view:

  • Grid lines
  • Track sizes
  • Area names

This feature is also compatible with CSS Flexbox, so try the same technique you learnt here, but on display: flex elements!


Availibility

The Grid editor is currently in Chrome 92 (Canary) and should be making its way to stable soon. The Flexbox editor is already in stable.
 

Email Marketing Powered by Mailchimp

Copyright © 2021 Umar, All rights reserved.
You are receiving this email because you signed up for Dev Tips.

unsubscribe from this list    update subscription preferences 

Older messages

Dev Tips: Only download JavaScript when it is appropriate

Wednesday, December 16, 2020

Learn a few techniques for selectively downloading web page resources Dev Tips Hey everyone! I have a different sort of tip for you today, hope it's useful. JavaScript: Conditional JavaScript, only

Dev Tips: DevTools: Record tests with the puppeteer recorder

Friday, December 4, 2020

A test generator for puppeteer built into Canary DevTools Dev Tips DevTools: Record tests with the puppeteer recorder 🎥️ Introduction The Puppeteer Recorder feature in Chrome DevTools can monitor your

Dev Tips: DevTools: Refactor your styles with CSS Overview

Wednesday, November 18, 2020

View different metrics on your styles and improve your overall CSS architecture Dev Tips DevTools: Refactor your stylesheets with CSS Overview Introduction The CSS Overview Panel provides interesting

Dev Tips: DevTools: Create your own keyboard shortcuts  ⌨️

Friday, November 13, 2020

The Shortcut Editor lets you assign your own preferred keyboard shortcuts to common workflows. Dev Tips DevTools: Create your own keyboard shortcuts ⌨️ Introduction The DevTools Shortcut Editor lets

Dev Tips: DevTools: The New Media Panel  🎬

Wednesday, November 4, 2020

The Media Panel in DevTools provides useful video inspection tools, useful for debugging, understanding, and learning about video. Dev Tips DevTools: The New Media Panel 🎬 I've written an article

[Python Dependency Pitfalls] "Re-inventing the wheel" disease

Saturday, July 24, 2021

Hey there, PyPI, the Python packaging repository, now contains more than 100000 third-party packages in total. That's an *overwhelming* number of packages to choose from... And this feeling of

The Plastic World of RealSelf

Saturday, July 24, 2021

Cyberbits #10: “The TripAdvisor of Boob Jobs” ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

The Framework Laptop is now shipping — BirdNet – Identify Birds by Sound — and AWS's Egregious Egress

Friday, July 23, 2021

Issue #473 — Top 20 stories of July 24, 2021 Issue #473 — July 24, 2021 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer. 1 The

Daily Crunch - Bitcoin 'is a big part of our future,' says Twitter CEO Jack Dorsey

Friday, July 23, 2021

TechCrunch Newsletter TechCrunch logo The Daily Crunch logo Friday, July 23, 2021 • By Alex Wilhelm Hello and welcome to Daily Crunch for July 23, 2021. It's been an interesting week for the crypto

Software Testing Weekly - Issue 81

Friday, July 23, 2021

Do you ask the right questions? View on the Web Archives ISSUE 81 July 23rd 2021 COMMENT Welcome to the 81st issue! Here's one thing I'd like to highlight this week. It's a meaningful post

The Dial-Up Volunteer Army 💾

Friday, July 23, 2021

How AOL was built on a an army of unpaid volunteers. Here's a version for your browser. Hunting for the end of the long tail • July 23, 2021 Today in Tedium: In some ways, social media started with

JSK Daily for Jul 23, 2021

Friday, July 23, 2021

JSK Daily for Jul 23, 2021 View this email in your browser A community curated daily e-mail of JavaScript news Snapshot Testing for Frontends There are many types of software testing. Among these, one

iOS Dev Weekly - Issue 517

Friday, July 23, 2021

Focusing on positivity and balance. ⚖️ View on the Web Archives ISSUE 517 July 23rd 2021 Comment I'm determined to write something more positive today! I've been far too negative recently, so

Can Ethereum Be Ultra-Sound Money? - DeFriday #10

Friday, July 23, 2021

Or is it all ultra-hopium? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

You probably don't need Redux: Use React Context + useReducer hook

Friday, July 23, 2021

Keep up-to-date with the latest programming news Codementor Your Weekly Digest TOP POSTS FROM THIS WEEK Nikhil Kumaran S You probably don't need Redux: Use React Context + useReducer hook I would