|

CSS Grid Tutorial

CSS Grid Tutorial

Let’s learn about the most exciting thing to come to front end web layout in a long time. That is the technology of CSS Grid. CSS Grid is a brand new set of technologies that allows web designers and developers to incorporate powerful page layout techniques on the web. Traditionally, page layout of the web has been an extremely challenging practice. In the past we may have used tables, divs, layers, all kinds of CSS hacks, and ultimately CSS Frameworks like Foundation, Bootstrap, and others. Now we have CSS Grid, a very powerful two-dimensional layout tool for positioning items on web pages. You can create just about any layout you can think of with CSS Grid. Let’s take a look at some examples of how CSS Grid works now.


Grid Container

The first thing we want to do is to set up a grid container. We do this by setting the display property to grid. Any direct children of a defined grid container are now automatically grid items.


display: grid;

Notice when we set display to grid, the items appear as stacked rows which span the whole width of the container. We have some images here with numbers as an example. You can see the grid lines as we have turned them on in Firefox for easy visualization.
display grid


display: inline-grid;

In the case of display being set to inline-grid, notice the grid items only span the width of the content.
display inline-grid


Explicit Grid

Once we have the container set up, columns and rows can be explicitly defined using the grid-template-rows and grid-template-columns properties.


grid-template-rows

Here, the first row explicitly has a height of 50 pixels, and the second row has a height of 75 pixels. All other rows simply use the height of the content they contain. In our case this is 100px by 100px images.
grid-template-rows


grid-template-columns

Now we have 2 rows and 3 columns all with an exact height and width of 100 pixels.
grid-template-columns


fr in grid-template-rows and grid-template-columns

Fractional units are a great way to let the browser automatically divide up the free space into equal parts. This example shows two rows of equal parts, and three columns of equal dimensions. The images are only 100px by 100px, so they begin to the left in each grid cell by default.
fr in grid-template-rows and grid-template-columns


Minimum and Maximum Grid Track Size

You can use the minmax() function to create grid tracks that use the available space, but that don’t shrink narrower than a defined size or grow beyond a defined size.


The minmax() function

grid-template-rows minmax example

grid-template-columns minmax

By combining minmax() and fr units, one can create all kinds of responsive designs that no longer need to make use of multiple media queries in the browser.


Repeating Grid Tracks

Rather than having to explicitly define every single row or column, you can use the repeat() function to say how many rows or columns you would like.


The repeat() function

repeat function example


Gutters With Grid Gap

By default there is no space at all between rows and columns. You can define whitespace between rows and columns using grid-gap. Note that you can not apply any styling to gutters. These are only for white space.


grid-gap

grid gap css

grid-row-gap grid-column-gap


Positioning Items Using Grid Line Numbers

What makes CSS Grid very powerful is the ability to place content exactly where you want it. Here are a few examples of positioning images in precise locations on the grid.


grid-row-start(end) grid-column-start(end)


grid-row-start grid-row-end grid-column-start grid-column-end


How To Span Items Across Rows and Columns

In these examples we will add some div elements with some background coloring to show how grid items can be made to span multiple rows or columns as you wish.

grid-column-start grid-column-end

grid-row-start grid-row-end

grid-row grid-column


Named Grid Lines

It is possible to assign names to grid lines when defined using grid-template-columns and grid-template-rows. Once a line has a name, it can be referenced when trying to position an item in the grid. Here we set up some names for the row and column lines. Once in place, we then position a grid item by referencing the names we provided and not the actual line numbers.

position grid item using named lines


How To Name and Position Grid Areas

An alternate method you can use for positioning items on the grid involves placing items using so-called named template areas. This approach is really pretty cool the way it works and is often referred to as a type of ascii-art method grid layout.

grid-template-areas example
Ok that is really cool!

We can easily reverse the above layout with a couple of simple tweaks.

grid-template-areas demo

You can also position items using grid area names. In this example, the first div has the coloring. It is actually placed in the footer area however due to setting grid-row-start, grid-row-end, grid-column-start, and grid-column-end to the named footer.

Positioning Items by Grid Area


Implicit Grid

What happens when you only have say 3 grid cells defined in the CSS, yet you have 9 grid items in the html markup? In this scenario, you start running into the concept of the Implicit Grid. Any extra items beyond the specified space are auto-placed in the implicit grid. An implicit grid can be defined using the grid-auto-rows, grid-auto-columns, and grid-auto-flow properties.

This first example shows only 3 cells explicitly defined. We have 9 grid items to deal with however. In this case, we use grid-auto-rows: 150px; to add new rows that are 150 pixels tall for any automatically inserted items.

grid-auto-rows example

Implicitly created cells will flow as rows but you can change this to columns if you like using grid-auto-flow: column.

grid-auto-flow column example


Aligning Grid Items With justify-items

There are so many ways you can align items in CSS Grid. Let’s look at a few examples here.


justify-items: start;

justify-items start example


justify-items: end;

justify-items end example


justify-items: center;

justify-items center example


justify-items: stretch;

justify-items stretch


Aligning Grid Items With align-items

All of the examples above for justify-items, also holds true for align-items.


align-items: start;

align-items start


align-items: end;

align-items end


align-items: center;

align-items center


align-items: stretch;

align-items stretch example

Lastly, you can combine the justify-items and align-items properties in an almost limitless fashion allowing you to create any type of layout alignments you want. Here we simply put everything right in the center on both the x and y axis.

justify-items center align-items center


Aligning Individual Grid Items

The examples just above show us how to justify and align items on the entire grid at once. You can take this further an align each individual grid element however you like. Let’s see a few examples of how to do that.

individual cell alignment

align-self on individual cells

justify-self align-self multi independent cells


How To Align Grid Tracks

You can align all of the grid tracks together relative to the grid container for interesting effect. We can look at a few of these examples here.


justify-content: start;

Aligns the grid to be even with the starting edge of the grid container.

align grid tracks justify content start


justify-content: end;

Aligns the grid to be even with the ending edge of the grid container.

align grid tracks justify content start end


justify-content: center;

Places the grid in the middle of the grid container.

align grid tracks justify content center


justify-content: space-around;

Sets an even amount of space between each grid item and half sized spaces on the ends.

align grid tracks justify content space around


justify-content: space-between;

Sets an even amount of space in between each grid item but there is no space at the far ends.

align grid tracks justify content space between


justify-content: space-evenly;

Sets an even amount of space in between each grid item even the far ends.

align grid tracks justify content space evenly

When using align-content for grid tracks, here are the results we see.


align-content: start;

Aligns rows to the start of the column axis and is the default value.

align grid tracks align content start


align-content: end;

Rows get aligned to the end of the column axis.

align grid tracks align content end


align-content: center;

Aligns rows to the center of the column axis.

align grid tracks align content center


align-content: space-around;

Any extra space inside the grid container is set to the start and end of each row track.

align grid tracks align content space-around


align-content: space-between;

Extra space is distributed between the row tracks.

align grid tracks align content space-between


align-content: space-evenly;

Extra space is distributed evenly between the rows and at the start and end of the track.

align grid tracks align content space-evenly


Learn More About CSS Grid

This tutorial is enough to spark your curiosity for CSS Grid. There are thousands of additional resources you can learn from to create the most awesome layouts you’ve ever seen! Here are a few good ones to get you going.


CSS Grid Tutorial Summary

Here are some summary concepts regarding CSS Grid.

  • CSS Grid Has Fixed and flexible track sizes: Web Designers can create grids with fixed track sizes, such as using pixels for example. This approach defines the grid to the specified pixel which fits to the layout desired. One can also create grids using flexible sizes such as with percentages or with the new fr unit designed for this application.
  • Precise Item placement: Developers can place page elements into a precise location on the CSS grid by using line numbers, names, or by targeting an area of the grid. CSS Grid also contains an algorithm to implicitly control the placement of elements not given an explicit position on the grid.
  • Automatic track creation to hold content: Web Developers can configure an explicit grid with grid layout however the specification also allows for content added outside of a declared grid. This adds additional rows and columns when needed.
  • Exceptional Alignment Control: As we saw with the many examples in this tutorial, there are a myriad of ways to align content of the grid and grid items. Developers can control how the items align once placed into a grid area, and how the entire grid is aligned. There is extreme flexibility regarding alignments.
  • Control of overlapping content: With CSS Grid, you can now configure page elements to completely or partially overlap for not seen before effects on web pages. Any layering may then be controlled with the familiar z-index property.
  • CSS Grid is a very powerful layout technology that promises to change how the web is developed for today and in the future. When combined with other powerful layout tools such as flexbox, developers can create layouts that were previously impossible to build in CSS.
|