Join Morten Rand-Hendriksen for an in-depth discussion in this video Advanced responsive magazine layout, part of CSS Grid: First Look.
- [Voiceover] The second Demo in the Exercise Files,…the Magazine Layout, is something all together different.…The inspiration for this Demo came from actual…magazine layouts, so, printed magazines.…What I wanted to show you here is you can use…CSS Grid to layout content on the Web in a completely…new way that we previously have not been able to.…That's because we are in fact working with a standard grid…and once you have a grid, you can place content…wherever you want, and you don't have to follow…the standard waterfall pattern of your content anymore.…
So, here's what I've done.…I've created a typical page that just has…a bunch of articles on it.…So, this is some very short articles with some images.…Here you have the first one and the second article…which has an image, a third article and the fourth article,…and I'm going to stop at the end with just an image.…Looking at the HTML, this is pretty straight forward.…Here we just have a main area with a bunch of stories.…So, they're articles.…Article, story one. story two, story three, story four,…
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