Flexbox layout grid x CSS Custom properties

flex-12col-grid.css

/* Originally from: https://codepen.io/MadeByMike/pen/ZyxwLm/ */

:root { 
  --row-display: block;
  --row-display: flex; 
  --col-basis: 100%; 
} 

@media (min-width: 800px) { 
  :root { 
    --row-display: flex; 
  } 
}
 
.col-1 { --col-basis: 8.33%; } 
.col-2 { --col-basis: 16.66%; } 
.col-3 { --col-basis: 25%; } 
.col-4 { --col-basis: 33.33%; } 
.col-5 { --col-basis: 41.66%; } 
.col-6 { --col-basis: 50%; } 
.col-7 { --col-basis: 58.33%; } 
.col-8 { --col-basis: 66.66%; } 
.col-9 { --col-basis: 75%; } 
.col-10 { --col-basis: 8.33%; } 
.col-11 { --col-basis: 91.66%; } 
.col-12 { --col-basis: 100%; } 
 
/*Logic fold*/ 

.row { 
	display: var(--row-display); 
	flex-direction: row; 
	flex-wrap: nowrap; 
} 
 
.col-1, 
.col-2, 
.col-3, 
.col-4, 
.col-5, 
.col-6, 
.col-7, 
.col-8, 
.col-9, 
.col-10, 
.col-11, 
.col-12 { 
	flex-grow: 0; 
	flex-shrink: 0; 
  flex-basis: var(--col-basis); 
} 
 
.col { 
	flex-basis: 100%; 
}