Flash Grid: Learn CSS Grid by Building a Grid System

dev.to dev.to6 months ago in #Dev Love76

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 > * { grid-column-end: span var(—grid-cols); // each grid item takes full-width by default } } In defining the number of grid columns, we use the !default SCSS flag in case the grid system is imported as a module, and we want this value to be customizable. The grid-template-columns is the property where we define the grid layout: we want 12 responsive columns. The width of each column is 1fr. Fr (fraction unit) is a smart unit, equal to 1 part of the available space. Because our grid is composed of 12x 1fr columns, each flexible column takes 1/12 of the available width. The repeat() function allows us to pass a single width value (1fr). Another way to define the same grid would be: .grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; // 🙈 } …but, you know…not so elegant! Here’s a quick overview of the grid we’ve just created: In the screenshot above, notice the numbers in between columns (for now, focus only on the positive numbers on top). These line numbers can be used to place grid items. In the .grid snippet, we’re also targeting all the grid children, and setting their grid-column-end value equal to span 12. By default, we want each child to take the whole available width. grid-column-end is used to specify the grid item’s end position. You can use this property to set an end line (e.g., grid-column-end: 3;). But if you use the “span” magic word, you define how many columns should be occupied by the grid item. For example, grid-column-end: span 12; means “span this element across 12 columns”. Why setting a default 12 columns span for the grid items? We’re working mobile-first. We can assume, in most cases, our grid items will occupy the full-width (12 columns) at first, and then a smaller amount of columns on bigger screens. Our default value prevents us from having to specify on each grid item .col-12 (span 12) manually. The number of columns is set as a CSS custom property, in case you want to change it on a component level (or by creating other utility classes). For example: .grid–2 { –grid-cols: 2; } Next, we can define utility classes for the grid-gap property: .grid-gap-xxxxs { –grid-gap: var(—space-xxxxs, 0.125rem); } .grid-gap-xxxs { –grid-gap: var(—space-xxxs, 0.25rem); } .grid-gap-xxs { –grid-gap: var(—space-xxs, 0.375rem); } .grid-gap-xs { –grid-gap: var(—space-xs, 0.5rem); } .grid-gap-sm { –grid-gap: var(—space-sm, 0.75rem); } .grid-gap-md { –grid-gap: var(—space-md, 1.25rem); } .grid-gap-lg { –grid-gap: var(—space-lg, 2rem); } .grid-gap-xl { –grid-gap: var(—space-xl, 3.25rem); } .grid-gap-xxl { –grid-gap: var(—space-xxl, 5.25rem); } .grid-gap-xxxl { –grid-gap: var(—space-xxxl, 8.5rem); } .grid-gap-xxxxl { –grid-gap: var(—space-xxxxl, 13.75rem); } The spacing variables are part of CodyFrame. You…

Like to keep reading?

This article first appeared on dev.to. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply