Grid Editing Made Simple with Chrome DevTools
CSS Grid Editor: Latest Addition for Chrome DevTools
The CSS Grid editor is one of the latest features provided by Chrome Developer Tools. It allows us to modify and preview CSS grids live in the browser. Besides, you can improve the speed of creating the grid layouts by multiple factors.
So, in this article, I explore the features available in the CSS Grid editor and how to use them in practice.
A Quick Look at CSS Grid editor
CSS grid editor comes as an inbuilt feature under the Elements section in Chrome DevTools.
I’m sure most of you are familiar with inspecting elements in a web page. However, I’ve listed these steps and highlighted the important areas, which we will explore further.
- Open the site you wish to debug with your Chrome browser.
- Right-click on the element that you want to inspect.
- Click on Inspect, which will open up Chrome Developer Tools as follows.
If you have applied display: grid or display: inline-grid to an HTML element on your page, an icon appears next to it in the Styles tab.
You can toggle the CSS grid editor by clicking on this icon. With just one click, you can customize the grid appearance and see the UI changes.
How cool is that? Before jumping into the details, let’s refresh our knowledge on CSS grid layouts first.
Quick Look at CSS Grid Layout
The CSS Grid Layout provides us with a grid-based layout system with rows and columns. It removes the need for floats and positioning and comprises child elements and a parent element.
<div class="grid">
<div class="box box1">Box #1</div>
<div class="box box2">Box #2</div>
<div class="box box3">Box #3</div>
<div class="box box4">Box #4</div>
<div class="box box5">Box #5</div>
<div class="box box6">Box #6</div>
</div>But is that is not enough to make a grid element.
How do Chrome DevTools detect a grid?
An HTML element becomes a grid container only when the
displayproperty is set togridorinline-grid.
{
"display": "grid",
"display": "inline-grid",
}Then you need to add separate classes for each box in the grid to define the two-dimensional alignment of its rows and columns.
.box1{
grid-column: 1/3;
grid-row: 1/3;
}What are the two different axis types?
There are two axes types in a grid layout that you can use to align your grid items.
- Block axis — If you have two paragraphs that appear over the other, they are in the direction of this axis.
- Inline axis — The inline axis is in the order in which text is usually written.
We can align the grid items, along these two axes.
With a little bit of customization, we can get a CSS grid similar to the below example. I will be using this to explain the features of the CSS grid editor.
You can find the complete code in my GitHub repo.
Chrome DevTools Grid Editor Features
CSS grid editor provides 4 properties to experiment with grid layouts. All these 4 properties allow us to justify and align-items. So, let’s see how these features work in practice.
1. Justify-items
The CSS justify-items property sets the way a box is justified inside its container along the block-axis.
With the Grid Editor tool, we can add justify-items property to our grid system. There are 4 options: the center, start, end, and stretch to choose, and changes will be reflected in the browser in real-time.
- start — The box is pushed toward the starting edge of the alignment container in the block-axis.
- end — The box is pushed toward the ending edge of the alignment container in the block-axis.
- center — The box is pushed toward the center of the alignment container in the block-axis.
- stretch —Is the default alignment that stretches the box to the four corners of the container in the block-axis.
Since we chose center to justify elements, each box is centered along the block-axis, and our grid system will look as follows.
2. Align-items
The CSS align-items property is quite similar to the justify-items property. But it controls the alignment of items along the inline-axis of the grid container.
Here, we have an extra option, called baseline additional to center, start, end, and stretch. It makes all the boxes aligned with their grid container.
Below is the same grid is system shown above with the align-items: center property.
Note: The next two features will need some changes to our grid system to see their true potential. So I removed the individual box classes and changed the grid class to have more space for the boxes to move around.
.grid{
display: grid;
height: 400px;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(2,100px);
grid-gap: 5px;
border: 1px solid lightslategray;
}3. Justify-content
The CSS justify-content distributes spaces between the items along the block-axis of the grid container.
We have the alignments options center, start, and end alongside the space-between, space-around, and space-evenly spacing options.
The grid system will look as follows after aligning it to the end.
4. Align-content
The CSS align-content property aligns grid items similar to the justify-content property, but along the inline-axis of the grid container.
Here we have the options of the alignments: center and stretch in addition to the spacing options.
After configuring justify-content: space-between and align-content: space-between, the grid system looks as follows.
Conclusion
In this article, I discussed how to use the Chrome DevTools grid editor and its features useful for developers.
The CSS editor was first introduced in the latest Chrome version 92.0. Although it provides few options, these are highly useful when handling CSS grid layouts.
It’s also important to note that the grid editor is accessible to both grid and nested grid systems.
Therefore, all of the above features are supported in nested grids and will work the same way.
However, these features are pretty limited and have a vast potential to grow with future updates.
Thanks for reading !!!
Build Better Component Libs and Design Systems
Share components across teams and projects to speed up development and make sure your users experience a consistent design at every touchpoint.
OSS Tools like Bit offer a great dev experience for building, sharing, and adopting components across teams and applications. Create a component hub for free give it a try →
