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 just call it LI class card item double.…