Join Morten Rand-Hendriksen for an in-depth discussion in this video Responsive grid layout with content repositioning, part of CSS Grid: First Look.
- [Voiceover] To help you get a better idea…of just how revolutionary the CSS Grid Layout Module is,…I've created two examples for you,…available in the Exercise Files.…You can find both under the Demos folder,…and they each consist of an HTML file…and a CSS file, both with the same name.…In this first movie, let's take a look…at the standard layout.…In this example, I want to showcase a couple of things.…First of all, you'll see how we can use CSS Grid…and Grid Template Areas for dynamic repositioning…in a responsive website.…And secondly, you'll see how we can use multiple grids…within one page for different purposes.…
The example is an imaginary website,…showcasing a tutorial on how to build…a garage door opener using Raspberry Pi.…Looking at standard-layout.html,…you'll see that this is a pretty straightforward page.…I've laid out a header first, then we have a large container…that holds all the site content,…and within that large container,…we have main, with a classic main area,…and this is where all the actual content is displayed.…
Join Morten Rand-Hendriksen in this course for a first look at this emerging CSS module. He covers setting up CSS grids, positioning content, and working with named lines and template areas. The final videos in the course introduce practical uses for CSS grids, including online magazines and three-column layouts.
- What is CSS Grid?
- Using the CSS Grid playground
- Setting up a CSS grid
- Positioning content in a CSS grid
- Using template areas in a CSS grid
- Creating a responsive grid layout