To begin, you should create a mixin specifically for handling media queries. Here is an example:
@mixin small {
@media screen and (min-width: 768px) {
@content;
}
}
@mixin medium {
@media screen and (min-width: 1024px) {
@content;
}
}
Repeat this process for any other sizes you may require. To use the mixin in your .scss file, follow these steps:
@include small {
//Your css rules here
}
@include small {
//Your css rules here
}
When creating a grid layout, it is recommended to utilize flexbox for column organization. Begin with defining your default columns like so:
.col {
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
padding-left: 10px;
padding-left: 10px;
box-sizing: border-box; //ensures padding is included in size calculation
}
.col-6 {
flex-basis: 50%;
max-width: 50%;
}
This setup will result in two columns for any window size using the classes 'col' and 'col-6'. If desired, the 'col' class can be omitted to remove gutters.
Next, define classes with corresponding media queries as shown:
@include small {
.col-sm-6 {
flex-basis: 50%;
max-width: 50%;
}
}
@include medium {
.col-md-4 {
flex-basis: 33.333333%;
max-width: 33.333333%;
}
}
By applying the classes 'col', 'col-sm-6', and 'col-md-4', your layout will automatically adjust to display one column under 768 pixels wide, two columns from 768 to 1023 pixels, and three columns at 1024 pixels or more.