Flash Grid: Learn CSS Grid by Building a Grid System #Dev

dev.to
2 months ago
Flash Grid: Learn CSS Grid by Building a Grid System

Lately, I’ve been experimenting with the idea of building a lightweight grid system based on CSS Grid. We do have a grid system in CodyFrame, and it’s based on Flexbox. However, CSS Grid has so many powerful features not available in Flexbox, so I ended up creating Flash Grid. I’m going to share the whole process behind creating Flash Grid. If you’d like to learn more about CSS Grid, this is a great place to start, since we’ll touch the main CSS Grid properties, and we’ll share some practical tricks to get the most out of this powerful layout system. In case you’d rather skip the tutorial and just grab the code: Let’s start! 🙌 The first step is creating the .grid class: $grid-columns: 12 !default; .grid { –grid-cols: #{$grid-columns}; display: grid; grid-gap: var(—grid-gap, 0); // default grid-gap = 0 grid-template-columns: repeat(var(—grid-cols), 1fr); // grid of 12 flexible columns >…

Leave a Reply