From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

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

Breaking the grid

Breaking the grid - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Breaking the grid

“

- [Instructor] One of the things I really love about working with CSS grid is it opens up opportunities to do things that we haven't really been able to do before, or things that used to be really difficult to do when it comes to layouts. So let me give you one example of that. Let's say in this three column layout, I want my featured image to span the two last columns. So the featured image spans all the way across to the edge of the screen, and the sidebar falls down below it. Doing this without CSS Grid would require doing some weird stuff with floating this main content next to the sidebar content and wrapping a container around it, but because we're working with CSS Grid, you can just reposition content or make it span bigger areas without really doing much at all. Let me show you how to approach this. So first I'll go into inspect element, and this time I'm not going to go to the layout, instead I'll go to the rules. So let's see, I'll pull this over here, so you can actually…

Contents