 In this episode, I would like to talk about debugging CSS Grid with DevTools. In my previous video, we talked about debugging CSS Flexbox. Grid debugging tools are similar but with more details in it. Let's say you have a grid container defined and want to create a layout like this with a fixed height header, a slim sidebar and a big content area. Let's start with enabling the grid batch next to the container. This way, you can visualize the grid layout better on the page itself. Another thing I would do here is extending the grid lines in the layout pane. I find the extended lines very helpful to inspect the grid alignment. Let's define the grid structure. We will have two rows with 100 pixels and 1fr each. 1fr means a fractional unit of the available space. Next, we define two columns with 1fr and 2fr each. Hmm, the section placement is not quite right now. Let's fix that with the help of the line numbers on screen. The line numbers on the side are the row numbers. We can refer to a particular row with either numbers. For example, we can place the header in row 1 or we can refer to it as row negative 3 as well. We also want to span the header across the whole line. The top and bottom line numbers refer to the columns. In our case, we want to span the column through line 1 to line 3. Negative 3 to negative 1 works too. Sekarang, our layout is looking good. The declaration just now is fine. But in some cases, you might label your line instead of using line numbers because numbers can be confusing sometimes, especially if you have a lot of grid items. DevTools can help you with that. Here, I will label the column lines as start, middle, and end. In the layout pane, I can choose to show line names instead of numbers. Then in the header, I can adjust the column to span from start to end instead of using the number. Isn't that nice? Apart from that, some people might label the grid by area instead of line. You can use DevTools to visualise that as well. In the grid, we can label the grid template areas by top-top and side main. Then in the layout pane, we can enable the show area name settings. With the area name shown on the screen, it is easier for us to work with our grid items. In the header, we can disable the row and column styles and replace it with grid area top instead. Another nice debugging settings is to show the track sizes of the grid. In the layout pane, enable the show track sizes option. The size labels are added to the overlay. The labels not only show the sizes we define in the styles pane, but the actual size as well. The labels are updated in real-time as we change the grid size. The last feature I want to mention here is the grid editor. It can help us to adjust the grid layout without memorising the syntax. Say we want to align our grid items to centre. You can click on the grid editor button in the styles pane. Then select align item centre and justify item centre to centre the items. I like this editor because it shows me a nice overview of all the options visually. Alright. To learn more about grid in general, go to this web.dev link on the screen. And to learn more about debugging grid with DevTools, go to guldotgirls-devtools-grid. That's all. See you for the next DevTools Tips. Ciao!