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.

Create different-sized grid items

Create different-sized grid items - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Create different-sized grid items

“

- Let me show you one more thing before we move on to the next example. Looking at this layout we have right now I'm sure you're thinking this is cool and all but it's starting to look really boring especially when we start lightening the view port. This is about as rigid of a grid as you can get and hardly inspirational unless you're making some sort of image gallery. If you want something a little more dynamic right, the images have different sizes, and different things happen. Well using CSS Grid that's actually pretty straight forward. If I go into my style sheet and then find the media query for this wide area where we have four columns, I can create a new rule, call it double, and then inside the rule I'll say grid, column, span two, and grid row, span two. That means any element that has double class appended to it will now span two columns and two rows. And I of course have to apply that to one of these elements. So I'll go in here and maybe add it to the first one. So I'll…

Contents