Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Get up and running with CSS Grid Layout

    Rory SmithRory Smith
    cssCSS

    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://.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 There are three display values that pertain to CSS grid. The grid value, which will generate a block-level grid, the inline grid value, which will generate an inline-level grid, and the subgrid value, which we may need when we come to nest grids within other grids.

    00:19 We'll use display grid, because we want to use a block-level grid. Let's jump in at the deep end by finding out a little bit about how CSS grid layout works. We'll provide our grid container with some grid items, which we're going to lay out with grid.

    00:38 We'll have a header, two asides, a section, and a footer. Now that we've got some markup to work with, let's go ahead and add some styles to our grid items, so that they show up clearly. Next we'll apply a gutter to our grid using a grid gap. Now let's make it responsive. We'll have our grid show a column on small screens.

    01:02 To do this we're going to use grid-template-areas. Which is a way to specify our layout in a very clear way. Notice that our section comes before our asides, which is different to how it is at the markup. That's no problem.

    01:18 For larger screens we want a different layout, so we'll set up a media query and we'll specify some different grid-template-areas. It's going to consist of three rows and three columns. We've specified how we want our grid to look in two different screen widths.

    01:37 The last thing to do is wire this up to our grid items. To do that we can use grid-area. Each grid-area name corresponds to a name specified in grid-template-areas.

    01:55 We've linked up all of our grid items with our grid container and already we have a nice, responsive CSS grid. On small screens our grid-template-areas describes a column layout and on larger screens we have a three-column layout.

    Discuss

    Discuss