![]() ![]() The second option in this section will highlight the overlay for the element in the webpage, and select the element in the Elements pane (as below). This is especially useful if there is a clash between the grid overlay color and the background. There is an adjacent color picker if you want to choose your own. Grid overlays sectionĬhrome selects different colors for the overlays by default to make it easy to distinguish between them. Let’s cover the Grid overlays section first. There are some options for customizing the overlay in the Layout pane. You can show the overlay by checking the adjacent checkbox:Īs you can see, there are some other settings in the Layout pane, which we will cover next. The label comprises the element name, ID selector (if any), and class selectors (if any). The grids are listed in order of occurrence. You can see them listed under the subheading “Grid overlays” (see red box below). Let’s take another example, recreating Instagram’s profile page using Grid. The Layout pane has a Grid section, which lists all of the grids out for us. It is more work to find them by inspection if you want to understand the layout of a page. In a more complex web page, there may be many grids, and they may not be a child of body like our previous example. Instead, you will see grid items flush to each other (as below) Of course, you may not have a gap, and there will be no gutter. The gap is 10px in our case, which is easy to pick out. Gaps between grid items are shown as a gutter with a dashed pattern.You will see the badge has changed color to indicate that is now active. In this simple example, the div with the “wrapper” class is a grid.Ĭlicking this badge will toggle the display of an overlay for the element, like so: In the Elements pane, you will see a grey grid badge next to a grid element: You can quickly discover if a page has grid elements in the following ways. ![]() You may need to enable Grid debugging in the DevTools settings, as it is still considered an experimental setting: ![]() If an HTML element on your page has display: grid or display: inline-grid applied to it, it’s a grid. Discovering grids in a page with Chrome DevToolsįirst things, first. I will show you how to discover grids in a page and give you tips on how to inspect the page layout and debug layout issues. It can take some of the pain out of debugging layout issues: no more adding red borders (or some similar hack) to see what is going on when you are building out your layouts. Visual inspection gives you a more efficient feedback loop when you’re building out an interface. There’s been a sharp increase in CSS grid usage.Īn important part of Grid’s success story is that now most of the major browsers have added Grid support to their DevTools. This year’s State of CSS Survey showed that 73.3% of respondents have used Grid, an increase of 18.6% from 2019. Debug CSS Grid with Chrome DevToolsĬSS Grid is a powerful layout specification that is growing in popularity year by year. He is travel-obsessed (one bug he cannot fix). He is an active participant in non-profit organizations supporting the underprivileged and promoting equality. Rob O'Leary Follow Rob is a solution architect, fullstack developer, technical writer, and educator.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |