Join Morten Rand-Hendriksen for an in-depth discussion in this video How to use the CSS grid playground, part of CSS Grid: First Look.
- [Voiceover] As I mentioned in the introduction,…I've created a CSS Grid playground for you…to work with as you follow along through this course.…The playground is available in the exercise files…for this course.…You can download and install it…anywhere on your computer.…It'll work right out of the box.…There are no advanced appendices…or need for development environments or anything like that.…The playground, found here on my desktop,…consists of HTML and CSS files and some folders.…In this chapter and the next, we'll work with index.html…and style-grid.css in the main folder.…
In chapter 4, we'll take a closer look…at the different demos contained in the Demos folder.…To play along with me in the CSS grid playground,…simply open the project folder…and your favorite code editor.…I'm going to use Atom, so I'll go to File,…Open Folder, navigate to CSS playground…on my desktop and click Select Folder.…Now I have access to all the files.…From here you'll see that index.html…is a basic HTML document holding a section…
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