CSS Grid
A simple, responsive grid system using CSS Grid and Scss ~ CSS Grid, Scss, HTML
Using CSS Grid properties and Scss features, I developed a simple, responsive grid system that can be easily integrated into projects. It allows you to define column spans and offsets as well as text alignments using breakpoints.
The first iteration of my CSS Grid was simple and focused on the ability to specify the number of columns a column would span. However, as I began considering how others might utilise the grid, I expanded its functionality by incorporating the ability to offset columns, thereby creating further flexibility when creating layouts.
To increase flexibility further, I implemented the ability define various column spans and offsets according to specified breakpoints.
The final addition I made was adding the ability to set text alignments based on the defined breakpoints.
Using Scss, I utilised features such as defining variables and mixins, nesting selectors, performing calculations, and applying flow control rules. All of this helped in reducing duplication in my code, making it quicker and easier to maintain and for others to adopt.
Variables are used to specify the number of grid columns, the gap between the columns and the breakpoints. This speeds up development, as you only need to amend the variable value rather than manually finding and replacing every instance of that value in your code.
// CSS Grid
$grid-columns: 12;
$gap: 10px;
// - Breakpoints
$breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
Before defining the columns, the setup of the grid itself was necessary. To enhance versatility of the grid, I created two containers with the latter defining a max-width:
• grid-container-fluid
• grid-container
The container sets both the number of columns and the gap between them. Both of these values are defined in the variables.scss file.
grid-template-columns is used to define the number and size of the columns. 1fr is a CSS unit representing a fraction of the space in the grid container. Using repeat, I set each column to be an equal fraction which is repeated by the number defined in the $grid-columns variable.
.grid-container-fluid, .grid-container {
display: grid;
grid-template-columns: repeat($grid-columns, 1fr);
gap: $gap;
padding: 10px 20px;
}
.grid-container {
max-width: 1360px;
margin: 0 auto;
}
The @for loop, which is a Scss control rule, iterated through my column spans and offsets to define their position on the grid. The @for loop counts from the specified number up to the value set in the $grid-columns variable, thereby establishing the span or offset number. To simplify the calculation of offsets and to ensure they begin in the correct position, +1 was needed.
@for $span from 1 through $grid-columns {
.span-#{$span} {
grid-column-end: span $span;
}
}
@for $offset from 0 through $grid-columns {
.offset-#{$offset} {
grid-column-start: $offset + 1;
}
}
To increase flexibility, I coded the ability the define different column spans and offsets based on breakpoints. I utilised @for loops within media queries to implemented this functionality. These operate similarly to the previous @for loops. The media queries are used to establish the breakpoint values whilst also generating the breakpoint class names. The loop then iterates through the spans and offsets to set the grid-column-end and grid-column-start value for each breakpoint.
@media (max-width: map-get($breakpoints, xl)) {
@for $span from 1 through $grid-columns {
.xl-span-#{$span} {
grid-column-end: span $span;
}
}
@for $offset from 0 through $grid-columns {
.xl-offset-#{$offset} {
grid-column-start: $offset + 1;
}
}
}
@media (max-width: map-get($breakpoints, lg)) {
@for $span from 1 through $grid-columns {
.lg-span-#{$span} {
grid-column-end: span $span;
}
}
@for $offset from 0 through $grid-columns {
.lg-offset-#{$offset} {
grid-column-start: $offset + 1;
}
}
}
@media (max-width: map-get($breakpoints, md)) {
@for $span from 1 through $grid-columns {
.md-span-#{$span} {
grid-column-end: span $span;
}
}
@for $offset from 0 through $grid-columns {
.md-offset-#{$offset} {
grid-column-start: $offset + 1;
}
}
}
@media (max-width: map-get($breakpoints, sm)) {
@for $span from 1 through $grid-columns {
.sm-span-#{$span} {
grid-column-end: span $span;
}
}
@for $offset from 0 through $grid-columns {
.sm-offset-#{$offset} {
grid-column-start: $offset + 1;
}
}
}
To ensure the columns are optimised for mobile devices, I added a custom media query that sets the columns to be span-12 with a starting column of 1 at 380px.
@media (max-width: 380px) {
[class*="span-"] {
grid-column-end: span 12;
}
[class*="offset-"] {
grid-column-start: 1;
}
}
The final addition I implemented was adding the ability to set text alignments based on the defined breakpoints. This was accomplished through the use of a @mixin which contained a @each control rule.
The @mixin uses the parameters set and iterates over each breakpoint defined in the varaibles.scss file. These breakpoints establish the max-width in media queries. Within each media query, it generates the class names based on the parameters.
@mixin text-alignment($prefix, $breakpoints) {
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }
@each $breakpoint, $value in $breakpoints {
@media (max-width: map-get($breakpoints, $breakpoint)) {
.#{$breakpoint}-#{$prefix}-left { text-align: left; }
.#{$breakpoint}-#{$prefix}-right { text-align: right; }
.#{$breakpoint}-#{$prefix}-center { text-align: center; }
}
}
}
Using a @mixin prevents repetition as when you include the mixin the $prefix is defined. This is achieved with the following Scss code:
@include text-alignment('align', $breakpoints);
The $value variable isn't directly utilised within this loop but is included to fulfill the syntax requirements of the @each directive, which expects two variables.
In summary, the grid system provides:
• the flexibility to adjust the number of columns in the grid (by default this is set to 12 through the $grid-columns variable).
• the ability to specify the number of columns a column will span and to set offsets on columns. These can be configured for each breakpoint (xl, lg, md, sm).
• the flexibility to modify the breakpoints by adjusting the widths inside the variables.scss file.
• the ability to set text alignments based on breakpoints for left, right and center text alignments.
Take a look at my code, and feel free to use and adapt it in your next project!
~
Previous versions
• CSS Grid: V1 — Column spans and offsets are adjusted automatically for smaller screens using @media queries at defined breakpoints rather than being able to manually define them.
📝 Edit CSS Grid: V1 on Codepen
📝 Edit CSS Grid: V1 on Codepen
