Since the Internet was invented, web developers have been looking for the most efficient way to display content in a web browser. Often, they've settled for workarounds in lieu of proper solutions.
Most recently, float-based layouts followed table-based layouts. Neither of these approaches was perfect, as floats and tables were never equipped to be used as layout tools.
In terms of table-based layouts, applicable HTML code is considered to be a deprecated attribute — which means using resulting code is considered bad for your website structure and can also be considered bad for SEO.
So, what's a marketing-minded web development team to do?
The solution: a CSS grid layout.
What Is a CSS Grid?
The CSS grid layout (also referred to as "the grid") was proposed to the CSS Working Group by Microsoft and the Grid Layout Working Draft was first published in April 2011.
Over time, this specification has been improved, thanks to feedback from developers and browser vendors who work together to make the grid a truly effective layout solution.
The grid acts as an addition to CSS that allows you to control the size and placement of grid items. You can use media queries to automatically adapt your grids to diverse contexts.
Benefits of a CSS Grid
Thanks to its flexibility, a CSS grid allows web designers to achieve almost any type of layout that they need. It's great for dividing up the major regions of a page into smaller sections or defining the relationship between elements in terms of size and position.
While it aligns page elements by columns and rows just like tables, the grid isn't limited by a particular content structure. This makes it possible to create a wider variety of website layouts than would be practical with tables, alone.
Additionally, without a content structure, the grid layout can easily adapt to changes in device, space, and orientation without requiring a semantic change in the content. You can rearrange grid elements -- no matter their source order -- which makes it possible to fit the layout to the context without changing the underlying markup.
A powerful auto-placement feature lets you easily fill up available space, eliminating the need for complex calculations. The grid even allows you to overlap items when you need to, which is definitely not possible with tables.
Now that we're familiar with the CSS grid, let's explore how to use it in the section below.
How to Use CSS Grid
W3Schools shows if you want to set up a grid layout, you must create a parent element (the grid container) and one or more child elements (the grid items).
Setting the display property of an HTML element makes it a grid container.
To start centering your grid items, use the align-items property. Some of the values that you can assign to this property are start, end, and stretch.
When the value of the align-items property is set to start, this places the items to the vertical start of their corresponding grid area while setting it to end places them at the end. When the value is stretch, the items are spread out across the grid area.
The justify-items property works similarly to the align-items property and accepts the same values on the inline axis.
To target just one item so you can center it, use the align-self and justify-self properties, respectively, at the item level.
The last step is making your grid responsive to a mobile layout. After all, if you create an amazing display you want it to be shareable through a mobile interface.
How to Make a CSS Grid Responsive
One of the best features of the grid is that it's fairly device responsive from the get-go. W3Schools shares these additional directions to guarantee responsiveness when using the grid.
To build a responsive Grid, first set the box-sizing property of all HTML elements to border-box. This includes the padding and border to the width and height of the elements.
Add this code to your CSS:
Next, you'll create a simple responsive web page for practice:
From there, you can add additional styling to customize the grid according to your website's branding.
If this sounds like too much work, then you might want to build with a front-end development framework like Bootstrap CSS. You can use the Bootstrap's built-in grid system so you're not creating grids from scratch. That way, you can focus on the content in the grid rather than the grid itself.
CSS Grid Example Layouts
Here are some CSS grid layout examples courtesy of Rachel Andrew:
To make it easy to follow, let us first define a grid:
The CSS grid was designed as a flexible solution to be applied to different use cases. While the basic concept of this layout tool remains the same regardless of your situation, the devil is in the details — you must understand how the various elements work together to produce a useful end result.
By spending the time necessary to understand the CSS grid, you're creating a strong foundation for producing responsive websites that make Google happy, unlike the deprecated table tag previously used for similar website layouts.