You can now use Chrome DevTools so you can visually inspect your CSS Grids and debug them.
CSS Grid is a layout module that allows you to design and develop complex, responsive web pages more efficiently while maintaining cross-browser consistency.
For a developer, CSS Gird is a tool that helps with things like code reuse, screen size, page load speed, etc.At the same time, for the designer, it supports streaming. efficiently download customer messages.
In other words, both the developer and the designer primarily benefit from CSS Grid. Therefore, in this article, I will guide you to check and debug page layout issues using Chrome DevTools.
Debugging CSS Grids with Chrome DevTools
When you design your web pages, have you ever felt that you need to see how the grid lines overlap, line numbers or grid area names? Understanding what’s going on behind the scenes of CSS Grid would be very helpful, right?
Now let’s see how we can test and debug layout issues using Chrome DevTools
Get started with Grid debugging. When applying display: grid or display: inline-grid to an HTML element, you can see the grid badge next to the element in the Elements panel. If you move the mouse pointer over the grid badge, you can see that an overlay appears on the element, like a grid to show the position of the grid lines and its borders.
As you can see, there’s a new section called Grid in the Layout tab, which contains several options to help you better check the grid.
Tip: If the Layout mode doesn’t appear at the bottom of Chrome DevTools, open commands (Ctrl + Shift + P) and select the Enable new CSS Grid debugging features option . You may need to reload DevTools to apply the changes
1. Grid Overlays
This section contains a list of all the grids available on the page with checkboxes and by enabling and disabling the grid overlay, you can select the grids that you want to debug. In Grid overlays , you can:
Enable Overlay Views of Multiple Grids
By selecting the corresponding checkbox, you can enable and disable grid overlays. In the given example, both grid overlays are turned on, each represented by a different color
Customize the Grid Overlay Color
This option helps you define your grids easily by letting you choose a color of your choice
Highlight the Grid
You can highlight the HTML element by clicking the highlight icon
2. Overlay Display Settings
This section includes a number of options such as displaying line numbers, displaying line names, etc. See what those options mean and what they do.
Show line numbers
By default, line numbers are displayed on the grid overlay
Show Line Names
Selecting this option from a list will display line names instead of numbers
Line name display makes it easy to visualize the beginning and end position of an element. As you can see in the above example, there are four lines: left, middle1, middle2 and right. Furthermore, elements are numbered in an order from left to right
Hide Line Labels
Likewise, you have an option to hide line labels and line numbers for each grid overlay
Show Track Sizes
By enabling this option, you can see the size of the grid. DevTools displays [authored size]. [Computed size] for each line, where authored size is the size defined in the stylesheet and computed size is the actual size on the screen.
As you can see above, for each column, both the authored size and computed size are displayed. However, for rows, only computed sizes are visible. That’s because the column sizes are defined in CSS, and for rows no row sizes are defined
Show Area Names
You can switch to show or hide the area name, in this example named grid areas. As you can see in the following example, there are four areas in the Grid – top1, top2, top3 and bottom
Extend Grid Lines
By default, grid lines can only be seen inside elements with display: grid or display: inline-grid . By selecting this option, you can extend the grid lines to the edge of the screen
As you can see, all of the above mentioned options help us to reduce the time it takes to define how blocks are displayed.
Final
While there are many tools to help Front-End Developers build grid-based websites, the introduction of CSS Grid Layout marks a major milestone.
Besides, CSS Grid has come a long way since its introduction in 2011. It now supports all major browsers.
With recent support with DevTools, it has made the debugging process more comfortable than ever. As I mentioned earlier, DevTools makes working with CSS Grid easier. You can visualize all grid data, test and debug generated with just one click. Besides, knowing the options in the Layout pane will help you debug your CSS grid like a Pro!