Meta tags:

Headings (most frequently used words):

debug, css, grid, areas, see, also,

Text of the page (most frequently used words):
grid (13), the (12), areas (7), css (6), names (4), debug (4), tips (4), safari (3), open (3), sidebar (3), with (3), firefox (3), elements (3), devtools (3), template (3), edit (2), page (2), and (2), named (2), area (2), that (2), container (2), you (2), can (2), tool (2), syntax (2), main (2), header (2), for (2), property (2), position (2), your (2), chrome (2), edge (2), menu (2), last, this, 2022, authors, mirnovov, patrick, brosset, tweak, flexbox, alignment, properties, see, also, under, section, enable, checkbox, show, pane, layout, select, element, from, defines, use, badge, dom, tree, find, containers, inspector, makes, very, easy, potential, problems, may, occur, when, making, mistakes, above, footer, bit, special, though, consists, series, strings, where, each, corresponds, one, row, example, really, useful, way, using, give, various, potentially, spanning, multiple, cells, then, simply, referring, those, categories, supported, mastodon, social, account, github, repository, all, browser, polypane, category, webcomponents, testing, productivity, personalization, perf, network, javascript, html, highlighter, help, frameworks, export, console, apps, accessibility, guides, understanding, close, skip, content,

Text of the page (random words):
debug css grid areas skip to main content close menu devtools tips guides understanding devtools tips by category accessibility apps console css debug export frameworks help highlighter html javascript network perf personalization productivity testing webcomponents tips by browser chrome edge firefox polypane safari all tips open menu github repository mastodon social account debug css grid areas categories css supported by edge chrome safari firefox a really useful way to position elements on a css grid is using the grid template areas property with it you can give names to various areas of your grid potentially spanning multiple cells and then simply position your elements by referring to those names the syntax for the grid template areas property is a bit special though it consists in a series of strings where each corresponds to one row in the grid for example container grid template areas header header sidebar main sidebar footer devtools makes it very easy to debug potential problems that may occur when making mistakes with the above syntax open the elements tool or inspector tool in firefox select an element from the page that defines a grid container with named areas you can use the grid badge in the dom tree to find grid containers open the layout sidebar pane under the grid section enable the show area names checkbox named area names in safari see also tweak css grid and flexbox alignment properties authors patrick brosset mirnovov last edit 3 16 2022 edit this page