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.

Free Intro Guide to HTML & CSS [Download Now]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.

CSS-Grid-1

Image Source

Grid items are the direct children of the grid container. They're arranged vertically into lines called columns and horizontally into rows.

The space between a row and a column is called a gap. You can adjust the gap using these properties:

  • grid-column-gap, which defines the gap between columns;
  • grid-row-gap, which defines the gap between rows; or
  • grid-gap, which is a shorthand property for grid-column-gap and grid-row-gap.

In-between columns and rows, there are lines referred to as column lines and row lines, respectively. We can see an example of this below.

CSS-Grid-2

Image Source

When positioning a grid item inside a container, you reference the line numbers.

How to Center a Grid in CSS

The grid is bidimensional, which means that the layout is completed with two axes: The y-axis (block axis) and the x-axis (inline axis).

In CSS, the align property is used to define the block axis while the justify property defines the inline axis.

CSS-Grid-3

Image Source

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:

* {

box-sizing: border-box;

}

Next, you'll create a simple responsive web page for practice:

CSS-Grid-Code-1

Image Source

For a web page with only two columns, the example above will suffice. However, if you want to have more control over the web page you can use 12 columns on the grid.

You must first calculate what percentage each column occupies. For example, 100% / 12 columns = 8.33% per column.

Next, make a class for each column, class="col-", as follows:

CSS-Grid-Code-2

Image Source

We mentioned float-based layouts at the beginning of this article. Although a CSS grid layout isn't entirely based on this system, it makes use of some similar properties.

In this example, you'll set your columns to float to the left with a padding of 15px, which gives each element room to breathe:

CSS-Grid-Code-3

Each row is wrapped in a <div> and the number of columns inside a row always adds up to 12:

CSS-Grid-Code-4

Next, you'll want to make sure to clear the float, ensuring all columns inside the row are within the flow of the page:

CSS-Grid-Code-5

Image Source

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:

CSS-Grid- Example-1

View Code

Line-based placement: Items are positioned on the grid using line numbers.

CSS-Grid- Example-2

View Code

Line-based placement shorthand, grid-row and grid-column: Items are positioned on the grid using shorthand properties.

CSS-Grid- Example-3

View Code

Line-based placement spanning tracks: For positioning items that cover more than one grid track.

CSS-Grid- Example-4

View Code

Line-based placement spanning tracks with the span keyword: To span tracks without start and end lines. Rather than target the grid line by number, you can use the span keyword.

CSS-Grid- Example-5

View Code

Line-based placement named lines: In addition to using line numbers, you can name your grid lines.

CSS-Grid- Example-6

View Code

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.

For another handy design trick, read how to create a CSS fade-in animation.

New Call-to-action

 css introduction

Originally published Feb 19, 2020 12:26:37 PM, updated July 06 2020

Topics:

Bootstrap CSS