Build Complex Layouts with CSS Grid Layout

42 minutes

In this course, we are going to learn about the CSS Grid Layout. The Grid Layout is a feature in CSS available in modern browsers.

CSS Grid layout is a two-dimensional layout method that gives you control over items in rows as well as columns. In this course we will look at multiple ways to divide the page into major regions with control of the size, position, and layer.

We’ll discuss all the features CSS Grid has to offer us, and how we can apply these features to real world layout-based obstacles. We’ll start with placing items on a grid by using grid-column and grid-row and progress to more complex topics such as nesting grids within grids.

pro-course-rss-logo

PRO RSS Feed

Get up and running with CSS Grid Layout

P

Place grid items on a grid using grid-column and grid-row

P

Specify a grid gutter size with grid-gap

P

Describe a grid layout using named grid lines

P

Refer to fractions of available space with the fr unit

P

Describe a grid layout using grid-template-areas

P

Use the minmax function to specify dynamically-sized tracks

P

Use the repeat function to efficiently write grid-template values

P

Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

P

Change the auto-placement behaviour of grid items with grid-auto-flow

P

Specify the sizes of implicitly created grid tracks

P

Re-order the appearance of grid items using the order property

P

Nest a grid within a grid

P

Specify grid columns, rows, and areas at once with the grid-template shorthand

P

Specify many grid properties at once with the grid shorthand

P
css tutorial about Get up and running with CSS Grid Layout

Get up and running with CSS Grid Layout

2:15 css PRO

We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then, let’s jump in at the deep end by putting together a simple grid layout in a flash.

CSS Grid Layout will not work unless upgrading
The Grid Layout is a new feature in CSS coming in Firefox 52 and Chrome 57.

Another option to enable the Grid Layout is to enable the Experimental Web Platform features flag in chrome://.

css tutorial about Place grid items on a grid using grid-column and grid-row

Place grid items on a grid using grid-column and grid-row

3:13 css PRO

It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some grid-template-columns and grid-template-rows, and to the grid items, we’ll pass grid-column and grid-row some numeric values.

css tutorial about Specify a grid gutter size with grid-gap

Specify a grid gutter size with grid-gap

1:13 css PRO

It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with grid-gap.

css tutorial about Describe a grid layout using named grid lines

Describe a grid layout using named grid lines

4:45 css PRO

We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-template-columns and grid-template-rows, and how to refer to these from our grid items.

css tutorial about Refer to fractions of available space with the fr unit

Refer to fractions of available space with the fr unit

1:54 css PRO

There’s an unfamiliar fr unit pertinent to CSS Grid, which allows us to specify a fractional unit of space. Let’s see how to apply it.

css tutorial about Describe a grid layout using grid-template-areas

Describe a grid layout using grid-template-areas

4:40 css PRO

We can describe the nature of a grid in an ‘ASCII-art’ way with grid-template-areas. Let’s see how to specify the nature of our grid so that it’s instantly recognisable to anyone else what our layout is going to look like.

css tutorial about Use the minmax function to specify dynamically-sized tracks

Use the minmax function to specify dynamically-sized tracks

2:21 css PRO

Using minmax() is an amazingly useful way to specify boundaries for the smallest and largest size a grid track can be. Let’s find out how to apply it.

css tutorial about Use the repeat function to efficiently write grid-template values

Use the repeat function to efficiently write grid-template values

3:14 css PRO

We can use the repeat() function if we have repeating specifications for columns and rows. With the minmax() function, we can define a size range for our grid items. Let’s see how to apply these properties, and how it affects the behaviour of our grid layout.

css tutorial about Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

2:10 css PRO

What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situation; auto-fill and auto-fit. We’ll explore what each one does and why we would need to use them on our grid-tracks.

css tutorial about Change the auto-placement behaviour of grid items with grid-auto-flow

Change the auto-placement behaviour of grid items with grid-auto-flow

2:39 css PRO

We can change the automatic behaviour of what order our grid items appear. We can even re-order the items in our grid to fill available space using the dense keyword. How do we approach this using grid-auto-flow?

css tutorial about Specify the sizes of implicitly created grid tracks

Specify the sizes of implicitly created grid tracks

2:22 css PRO

What happens if our grid items are in implicitly created tracks? Let’s learn how to handle the situation in which we may not have accounted for grid items to show.

css tutorial about Re-order the appearance of grid items using the order property

Re-order the appearance of grid items using the order property

2:05 css PRO

As with flex items, we can set an order value on grid items. Let’s see how this affects the DOM and the appearance of our grid.

css tutorial about Nest a grid within a grid

Nest a grid within a grid

1:56 css PRO

A grid item can also be a grid container! Let’s see how to specify a grid within a grid.

css tutorial about Specify grid columns, rows, and areas at once with the grid-template shorthand

Specify grid columns, rows, and areas at once with the grid-template shorthand

3:33 css PRO

We can specify grid columns, rows, and areas in one property using the grid-template shorthand.

css tutorial about Specify many grid properties at once with the grid shorthand

Specify many grid properties at once with the grid shorthand

4:09 css PRO

Using the grid shorthand property, we can set all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), and the gutter properties (grid-column-gap and grid-row-gap) in a single declaration.

Presented by:

Rory Smith

Rory is a front end developer from Leeds, UK.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?