Building Modern Web Layouts Using CSS Grid

Content:

In the ever-evolving world of web design, creating flexible and responsive layouts is crucial. CSS grid is a powerful part of the CSS specification, that allows for complex tabular-like layouts to be created without requiring complex code. This post will introduce CSS grid, and show how it can be used to create appealing website designs.

What is CSS Grid?

CSS grid allows you to create layouts using rows and columns, making it easy to design complex web pages without relying heavily on floats, positioning, or other layout hacks. It allows for the creation of structured page designs, without the limitations of using HTML tables (as was common back in the 2000s). If you can plan your page layout using graph paper or even Microsoft Excel, you can easily implement the design using CSS grid.

It’s also ideal for creating flexible, responsive page designs, with tools to alter the ordering and positioning of grid elements on the fly, regardless of where they are positioned in the page source.

Before we dive into examples, it’s important to understand some key concepts and terminology associated with CSS Grid:

1. Grid Container: The element on which display: grid is applied. It contains grid items.
2. Grid Item: The children of the grid container. These items are placed inside the grid.
3. Grid Lines: The dividing lines that create the structure of the grid, both horizontally and vertically.
4. Grid Tracks: The space between two adjacent grid lines, which can be either a row or a column.
5. Grid Cells: The smallest unit of the grid, defined by the intersection of a row and a column.
6. Grid Areas: A rectangular area that spans multiple grid cells.

Creating a Basic Grid

To create a grid layout, you first need to create a div container element to house the grid contents. On this element, apply the CSS property display: grid.

The container also needs a CSS property to define the number of rows or columns the grid should contain. This can be done using grid-template-columns, or grid-template-rows. Provide sizes that correspond to the number of rows/columns you need. You can also use CSS fractional sizing, to specify the distribution of free space to each element, rather than using fixed sizes.

You can combine different sizing formats to suit your needs, as in the entry below:

grid-template-columns: 1fr 100px 1fr 16rem;

This example will create a four-column grid, with the second and fourth columns using a fixed size, and the remaining space equally distributed between columns 1 and 3.

Let’s start with a simple but complete example to illustrate how CSS grid works. Suppose we want to create a basic grid with three columns and two rows. Here’s the HTML structure:

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

Now, let’s style this using CSS Grid:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

In this example, the grid-template-columns property creates three equal columns. The gap property adds spacing between the grid items.

Positioning Grid Items

CSS grid provides powerful tools for positioning grid items. You can place cells precisely where you want them using grid line numbers, names, or shorthand properties.

To specify the start and end points of a grid column, you can use the grid-column-start and grid-column-end properties. Row variants also exist – grid-row-start and grid-row-end.

These points can be combined using the grid-column and grid-row properties, with the start and end values separated by a / (e.g. 1 / 3 to start at row/column 1, and end at row/column 3)

Here’s how you can position an item to span multiple rows and columns:

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item" style="grid-column: 1 / 3; grid-row: 2 / 4;">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

In this example, the fourth item spans from column 1 to 3 and from row 2 to 4. This flexibility allows you to create complex layouts without writing additional HTML or using absolute positioning.

Responsive Design with CSS Grid

One of the biggest advantages of CSS Grid is its ability to create responsive layouts. By using fractional units (fr), minmax functions, and media queries, you can design grids that adapt to different screen sizes.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
}

In this example, grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); creates a grid that fills the available space with columns that are at least 100px wide but grow to fit the space.

Conclusion

CSS Grid is a game-changer for web developers, offering a flexible and intuitive way to create complex, responsive layouts. By mastering CSS Grid, you can simplify your CSS, reduce reliance on layout hacks, and build stunning web designs that work across all devices.

This post introduces the basics of CSS grid – enough to get you started, and begin producing layouts using the CSS grid structure. Check out our other articles on CSS grid, to check out some of the more advanced features and layout techniques made possible using CSS grid.