The Web has come a long way. Web designers have moved far from hacking HTML tables just to—painstakingly—lay out elements on a webpage. Newer and far more efficient innovations have given web developers more control, making it easier to morph concepts into rich, responsive webpages. Web developers have heavily relied on float, clear, flex, and some have had to use frameworks to achieve layout “sanity.” The arrival of CSS Grid has no doubt extenuated the burden of layout design.
Unlike Flexbox, CSS Grid works in two dimensions—both rows and columns can be easily manipulated. Thus, Grid provides a very flexible way of positioning and sizing elements on a webpage with the ability to overlay elements. Not only is Grid flexible, it is also intelligent. Without explicitly specifying the placement of items, Grid can automatically place them for you! Since its release, it has seen quick adoption with most recent browsers supporting it.
Let’s see some grid layout in action. Later, I will introduce the Firefox Grid Inspector tool, which is used to visualize Grid and precisely place items neatly on a webpage.
Grid In Action
To begin using CSS Grid, you first need to define a grid on a container in CSS. (Note: if the container has children, the children become grid items.)
.container {
display : grid;
}
if you want it to be inline, you will have to use this:
.container {
display : inline-grid;
}
This will define a grid on an HTML element with the class container. For now, assume the HTML element is a div with four other nested div. This code doesn’t do much; let’s dive a little deeper and add more styling.
.container {
display : grid;
grid-template-columns : 1fr 1fr 6fr 2fr;
grid-template-rows : 400px;
grid-gap : 8px;
}
This creates four grid columns that span a row of 400px each. Items later added to the grid container will also conform to this guideline. Also, note the use of fr. This is a length unit introduced with Grid, which represents a fraction of the grid container space. Therefore, 1fr 1fr 6fr 2fr in the code above divides the container space into 10 equal parts, and then assigns the first column one part, and the third six parts, in that order. The grid-gap attribute adds space between grids—in this case, 8px. To see the effects of the code, you may apply background colors to the grid items to yield something similar to the example below.
Grid has several other attributes that make it easier to design page layouts, but I will not cover them all here. Rachel Andrew, a Grid expert, has collated tons of resources on CSS Grid on her site. Do check it out, as you will most likely find answers to questions you may have about Grid as well as examples. Jen Simmons, likewise, provides some useful resources here.
Firefox Grid Inspector Tool
When you start designing a grid layout, you will quickly realize nothing shows up on the screen indicating the presence of a grid, which can be quite annoying. This is where the Firefox Grid Inspector tool comes in handy. The tool is available in Firefox 52 and higher. To use it, simply right-click on any grid element and select Inspect Element. This opens up Developer Tools, and you will find the grid mesh under the Rules tab: 
. Clicking on the mesh will make grid lines visible, giving you a peek into exactly how elements are aligned and positioned. With the grid activated, any changes to the grid will be easy to see, even without background colors.
With Grid seeing wide use, this tool will no doubt be a must-have for web designers. Improvement to the tool is planned in the coming year. Hopefully, other browsers will follow suit and ship with a native grid inspector.
