From the course: CSS: Advanced Layouts with Grid
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
The challenge - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
The challenge
- [Instructor] CSS Grid provides a clean solution to the ever-popular full-bleed single column layout. But the solution is not immediately obvious for reasons that will become clear right now. The full-bleed single column layout features sections and images that span the full width of the view port, thereof full-bleed, and the contents within each section are center-aligned with a max width. Doing this without CSS Grid requires a lot of extra container nesting and can be quite messy on the HTML site. With CSS Grid the HTML is nice and clean but we have to think a bit outside the box to get the layout to work. Here's the challenge: technically what we're looking for in this layout is a four-column grid where full-bleed content takes up all four columns and the centered content takes up the two middle columns. The problem is, we can't use a single global grid to do this because the grid items would be the individual sections and we would have no way of aligning the contents within those…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
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.