Menu icon Foundation
Correct way to set up a custom grid using grid-row & grid-col

Wanted to confirm when setting up a custom grid using the grid mixins if the way I have done it below is the correct way to format the scss file?

.container{
    @include grid-row;
}

.main{
    @include grid-col;
	
	@include breakpoint(medium){
		@include grid-col-size(6);
	}
	@include breakpoint(large){
		@include grid-col-size(8);
	}
	border:1px solid green;
}

.sidebar{
	@include grid-col;
	
	@include breakpoint(medium){
		@include grid-col-size(6);
	}
	@include breakpoint(large){
		@include grid-col-size(4);
	}
	border:1px solid red;
}
            

         

grid-colgrid-rowgrid-col-sizefoundation6

Wanted to confirm when setting up a custom grid using the grid mixins if the way I have done it below is the correct way to format the scss file?

.container{
    @include grid-row;
}

.main{
    @include grid-col;
	
	@include breakpoint(medium){
		@include grid-col-size(6);
	}
	@include breakpoint(large){
		@include grid-col-size(8);
	}
	border:1px solid green;
}

.sidebar{
	@include grid-col;
	
	@include breakpoint(medium){
		@include grid-col-size(6);
	}
	@include breakpoint(large){
		@include grid-col-size(4);
	}
	border:1px solid red;
}
            

         
Brandon Arnold almost 4 years ago

Thats is exactly right!

Bjarni Wark almost 4 years ago

After applying the above technique to a site and needing a few extra content areas and columns, the site is looking at having over 40 or so media queries for the the layout grid.

Is this a red flag that I am doing it wrong and should look at another way or is this normal CSS kind off output?