From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

3-column layout with grid areas, part 2

3-column layout with grid areas, part 2 - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

3-column layout with grid areas, part 2

“

- [Instructor] Looking at our page, it seems like 500 pixels might be about a good point to change it to a different layout. Going into my code, after the CSS, I'm gonna add a media query. I'm gonna start down on line 35. @media and then parentheses min-width colon 500 pixels. This is telling it that the style should apply when the view port is a minimum width of 500 pixels. I'm gonna add my brackets and then my first style is for container and the style I'm gonna add is grid template columns colon. And I want three columns so I'm gonna do repeat and then in parentheses three coma one fr. So I'm repeating three columns, each will have a width of 1 fr. So save, and refresh. It sets up our three columns but since we set only one grid template area per row that's where the content is. To move the grid items into different locations with the grid template area, we just change which names are in each line. So my next style in the media query is gonna be applied to the container element…

Contents