From the course: CSS: Advanced Layouts with Grid
Unlock this course with a free trial
Join today to access over 24,800 courses taught by industry experts.
What you're creating: An asymmetrical layout - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
What you're creating: An asymmetrical layout
- [Instructor] Because Grid gives us such specific placement options, we can actually create grid-based layouts where elements are asymmetrical or even appear broken. By that, I mean at a glance, there are no obvious rows and columns, so it looks like we've defied the typical grid. Our challenge here is to create a primary grid with two columns that will hold our nested grids and, of course, we'll make sure it's responsive. From there, we'll create two separate grids with different configurations that will help us to achieve this asymmetrical look. Let's dive in.