CSS Grid - Using line names

From the creator

The CSS Grid is awesome, but it takes some getting used to. When we want to explicitly place something on the grid, it can be really hard to do it by using line numbers. Just remembering which number is which line can be annoying. Luckily, we can name our lines, which just makes life a lot better! In this video I create a relatively simple layout using the grid, and then use line names to make it a lot easier to use. While the layout is simple, it's totally something that you could use in one of your projects. On top of making it easier to remember which line is which, it's super easy to do! The only draw back is, as of the time that I put this video up, Sass can't compile if we use line names, so if you're using the CSS Grid and really want some line names, you'll have to write some vanilla CSS. I realize this is a pretty big drawback for some (myself included), but it's such a cool feature I had to talk about it. You can play with my code on CodePen here: https://codepen.io/kevinpowell/pen/QMGoBO Also, I just found a solution to using line names in Sass (YAY!) - https://stackoverflow.com/questions/43206860/named-css-grid-lines-with-scss --- Support me on Patreon: https://www.patreon.com/kevinpowell I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/Kev

Published 2017-08-09 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.