Join Morten Rand-Hendriksen for an in-depth discussion in this video A simpler way to draw grid lines with math, part of CSS Grid: First Look.
- [Voiceover] At this point you probably notice that…while writing the code for simple grids is pretty simple…if you want to create a grid with a lot of rows or columns…things will get pretty hairy.…Let's say for example you wanted to create…a classic 12 column grid with 10 pixel gutters.…That would mean writing one fr 10 pixel 12 times…which is neither effective nor easily manageable.…Luckily we don't have to do this.…Instead, we can use simple math.…Using the Repeat keyword we can specify…how many times to repeat a specific pattern.…
In this example I want to start and end the grid…with a column that is one fr wide.…So I set up a one fr column first…and then repeat the pattern of a 10 pixel gutter…followed by a one fr column 11 times.…The result is exactly the same.…A 12 column grid with 10 pixel gutters…between each column.…This syntax when displayed in your CSS…is really easy to read.…You're gonna see here we first set up a 1fr column…and then set up 10 pixel 1fr and repeat that 11 times.…
Of course at this point,…
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