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

Already subscribed? Sign In

Autoplay

    Get up and running with CSS Grid Layout

    Rory SmithRory Smith

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

    cssCSS
    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