Simple Bootstrap like grid with CSS Flex / CSS Grid

A simple example implementation of a Bootstap like grid layout.

Not complete or responsive, just an example!

1. using CSS Flex

.row {
display: flex;
width: 100vw;
flex-wrap: wrap;
}
.col-1 { flex: 1 0 calc( 100% / 12 * 1); }
.col-2 { flex: 2 0 calc( 100% / 12 * 2); }
.col-4 { flex: 4 0 calc( 100% / 12 * 4); }
.col-8 { flex: 8 0 calc( 100% / 12 * 8); }
.col-12 { flex: 12 0 100%; }


2. using CSS Grid

.row {
display: grid;
width: 100vw;
grid-template-columns: repeat(12,auto);
}
.col-1 { grid-column-end: span 1; }
.col-2 { grid-column-end: span 2; }
.col-4 { grid-column-end: span 4; }
.col-8 { grid-column-end: span 8; }
.col-12 { grid-column-end: span 12; }


Responsive Example unter Replace Bootstrap Layouts with CSS Grid