How to Identify a Websites Grid System and Layout Structure

Chrome's DevTools can show you exactly how a page's layout is built: its grid columns, gutters, flexbox rows and breakpoints. Here's how to read a site's structure, whether you're learning design or rebuilding a page.

See the grid with DevTools

1. Right-click the page and choose Inspect.
2. In the Elements panel, look for small grid and flex badges next to elements. Click a badge to draw an overlay on the page showing the columns, rows and gaps.
3. Open the Layout tab in the side panel to turn on several grid overlays at once, with line numbers and track sizes.

Hover over an element to see its size, padding and margins highlighted on the page.

Measure the layout

• Container width: select the main wrapper and check its max-width in the Styles or Computed tab.
• Columns and gutters: look at grid-template-columns and gap on grid containers.
• Spacing system: check margins and padding on a few elements. Many sites use multiples of 4 or 8 pixels.

Find the breakpoints

Press Ctrl + Shift + M in DevTools to open device mode, then drag the page width and watch where the layout changes. The bar at the top can also show the site's media queries as colored bands.

Framework clues

• Bootstrap: class names like container, row and col-md-6, usually on a 12-column grid.
• Tailwind: utility classes like grid-cols-12, md:flex and gap-6.
• Website builders: Webflow, Wix and Squarespace leave their own clues. See how to tell what platform a site uses.

Check the page structure, too

"Structure" also means the HTML outline: headings, landmarks like header, nav, main and footer, and the order content is read in. In DevTools, the Accessibility pane shows how assistive technology reads the page. A clear structure helps both screen reader users and search engines.

The rest of the design

Layout is one part of a design system. Font Detector shows the font, size, weight and line height of any text you click, and Color Palette Extractor lists a page's colors with their codes. Together they give you a quick read of a site's type scale and palette.

Use it to learn, not to copy

Studying layouts is how many designers learn. Borrow ideas such as column counts and spacing, but don't copy a site's code, images or text. For type, see the best font sizes and weights for screens.