A 12 column layouting option using css grid based properties. Allows for responsive layouting based on responsive break points

Basic grid spanning 12 columns:

Column 3
Column 3
Column 6
Column 4
Column 8
Column 5
Column 7

With gutter space using class “is–gap-10” “is–gap-20”:

Column 2
Column 3
Column 2
Column 5

Column 6 – is–gap-20
Column 6 – is–gap-20
<div class="app-grid">
	<div class="grid__col-3">Column 3</div>
	<div class="grid__col-3">Column 3</div>
	<div class="grid__col-6">Column 6</div>
	<div class="grid__col-4">Column 4</div>
	<div class="grid__col-8">Column 8</div>
	<div class="grid__col-5">Column 5</div>
	<div class="grid__col-7">Column 7</div>
</div>

<div class="app-grid is--gap-10">
	<div class="grid__col-2">Column 2</div>
	<div class="grid__col-3">Column 3</div>
	<div class="grid__col-2">Column 2</div>
	<div class="grid__col-5">Column 5</div>
</div>
<div class="app-grid is--gap-20">
	<div class="grid__col-6">Column 6</div>
	<div class="grid__col-6">Column 6</div>
</div>

Responsive grid using prefixed classes:

“sm” prefix uses breakpoint as 768px. Above this the columns will span 6 column and below breakpoint will span 12 columns as defined here.

.grid__col-12 .grid__col-sm-6
.grid__col-12 .grid__col-sm-6

“md” prefix uses breakpoint as 992px. Above this the columns will span 6 column and below breakpoint will span 12 columns as defined here.

.grid__col-12 .grid__col-sm-6
.grid__col-12 .grid__col-sm-6

“lg” prefix uses breakpoint as 1200px. Above this the columns will span 6 column and below breakpoint will span 12 columns as defined here.

.grid__col-12 .grid__col-sm-4
.grid__col-12 .grid__col-sm-4
.grid__col-12 .grid__col-sm-4

Responsive class options:

Default (< 768px) Small (> 768px) Medium (> 992) Large (> 1200)
Class Prefix .grid__col- .grid__col-sm- .grid__col-md- .grid__col-lg-

<div class="app-grid is--gap-sm-10">
	<div class="grid__col-12 grid__col-sm-6">
		.grid__col-12 .grid__col-sm-6
	</div>
	<div class="grid__col-12 grid__col-sm-6">
		.grid__col-12 .grid__col-sm-6
	</div>
</div>

<div class="app-grid is--gap-md-10">
	<div class="grid__col-12 grid__col-md-6">
		.grid__col-12 .grid__col-md-6
	</div>
	<div class="grid__col-12 grid__col-md-6">
		.grid__col-12 .grid__col-md-6
	</div>
</div>