Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive Grid Layouts Utilizing SASS
$content-width: 58.75rem;
$padding-col: 0.625rem;
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.content {
@include clearfix;
margin: 0 auto;
max-width: $content-width;
padding: 0 $padding-col;
width: 90%;
}
.grid-container {
@include clearfix;
max-width: 1200px;
width: 100%;
}
.row::before,
.row::after {
clear: both;
content: '';
display: table;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
}
.padded-col {
padding: 0 $padding-col;
}
.col-1 {
width: 16.66%;
}
.col-2 {
width: 33.33%;
}
.col-3 {
width: 50%;
}
.col-4 {
width: 66.66%;
}
.col-5 {
width: 83.33%;
}
.col-6 {
width: 100%;
}
// Tablets
@media (max-width: $tablet-landscape-min) {
[class*='column-'] {
width: 100%;
}
}
// Mobile Devices
@media (max-width: $phone-portrait-max) {
[class*='column-'] {
width: 100%;
}
}
$super-ultra-tiny-flip-phone-max: 240px;
$flip-phone-max: 319px;
$phone-portrait-max: 480px;
$phone-landscape-max: 640px;
$tablet-portrait-min: 641px;
$tablet-portrait-max: 768px;
$tablet-landscape-min: 769px;
$tablet-landscape-max: 1024px;
$desktop-min: 1025px;
$desktop-max: 1440px;
$xl-desktop-min: 1441px;
$xl-desktop-max: 1920px;
$xxl-desktop-min: 1921px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment