From the course: CSS: Advanced Layouts with Grid
Join today to access over 24,800 courses taught by industry experts.
Create the first nested grid - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Create the first nested grid
- [Instructor] In this lesson, we're going to lay out this intro section. To reorient you with the markup, we've got this div with a class of intro. And inside that we have a paragraph with a class of title, a second paragraph with a class of description, and a figure with a class named after our robot Rivet. And within that figure, we've got an image element. So we're going to create a unique grid on this intro div, and that will give us three top-level descendants that we're working with: the title, the description, and Rivet. To get this asymmetrical layout we're going for, we need to think about how we're going to arrange this in the context of rows and columns. While there are three sort of obvious rows in this layout, the first row with the title, the second row with the description, and the third with the image, how we lay out our columns isn't as immediately clear. In thinking through this design, I decided to use four equal-width columns, and then use manual grid item…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.