Join Morten Rand-Hendriksen for an in-depth discussion in this video Create named lines, part of CSS Grid: First Look.
- View Offline
- [Voiceover] Now that you understand the basics…of the CSS Grid layout module,…I'm sure you left with the same observation as me:…referring to rows, columns, and areas by line numbers…seems cumbersome and hard to make sense of.…And you're right, it is.…If we look at the 12-column grid I created…at the end of the previous chapter,…we have 23 column lines, and keeping track of which one…we want to target for our layout is not at all easy.…Fortunately, we don't have to.…The CSS Grid layout module has already…accounted for this problem and provided us…with two solutions we'll cover in this chapter:…named lines and template areas.…
Let's look at named lines first.…Using the 12-column grid as an example,…I want to create a more traditional layout…with a header, two sidebars on the left and right,…a main content area, and a footer.…This means placing specific items in specific grid areas.…To simplify this process, I'm going to name key lines…so they can be targeted more easily.…For the layout, I want the header and footer…
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