Chrome DevTools and Edge DevTools are adding CSS Grid tooling. The tooling was a joint effort between Chrome and Edge teams. It will help developers achieve better responsive design without complicated alignment hacks or JavaScript-assisted layout. There are three main features for CSS Grid:Grid-specific, persistent overlay that helps with dimensional and ordering information Badges in the DOM Tree that highlight CSS Grid containers and toggle Grid overlays.
Table of contents
# Why did we make CSS Grid Tooling?# Tooling design# Grid persistent overlays# Real-time Grid badges# Layout pane# ConclusionSort: