From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Project: Grid and dev tools

Project: Grid and dev tools

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Project: Grid and dev tools

“

- [Instructor] In this update, we're gonna use the dev tools to experiment and test changes to our grid layout. If you don't already have it open, right-click and select Inspect. Let's start by adding a gap between the rows and columns to create space between the grid items. In the HTML panel, select the resume-container div. Now we can see the corresponding CSS. We can also add the gap property to the CSS panel to test the values right in the browser. Just click on a blank area. A cursor will appear, and we can add our gap property. Press Enter, Return, or the Tab key to a add value. Let's try 30 pixels. I chose a fixed size to maintain consistent spacing, regardless of the container width. Now, when we select the grid label, we can see that the gap has been added. If you wanna adjust the size, click on the value and type a new one, or use the up and down arrow keys to change the value by one unit at a time. We…

Contents