Sample Flex Grid

by Brett

HTML

<div class="flex-grid">
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>

  <div class="col-3">.col-3</div>
  <div class="col-3">.col-3</div>
  <div class="col-3">.col-3</div>
  <div class="col-3">.col-3</div>

  <div class="col-4">.col-4</div>
  <div class="col-4">.col-4</div>
  <div class="col-4">.col-4</div>

  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>

  <div class="col-3">.col-3</div>
  <div class="col-9">.col-9</div>

  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

SCSS

// Flex Grid Container
.flex-grid {
  display: flex;
  flex-flow: wrap;
	@media (max-width: 400px) {
		display: block;
	}
	
  & > [class*="col-"] {
  	box-sizing: border-box;
    height: 50px;
		margin: 0 0 10px 0;
		padding: 10px;
    background: #E8EAF6;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 25px;
		text-align: center;
		border: 1px solid #fff;
  }
}

// Columns
.col-1 { flex: 0 0 8.3333% }
.col-2 { flex: 0 0 16.6666% }
.col-3 { flex: 0 0 25% }
.col-4 { flex: 0 0 33.3333% }
.col-5 { flex: 0 0 41.6666% }
.col-6 { flex: 0 0 50% }
.col-7 { flex: 0 0 58.3333% }
.col-8 { flex: 0 0 66.6666% }
.col-9 { flex: 0 0 75% }
.col-10 { flex: 0 0 83.3333% }
.col-11 { flex: 0 0 91.6666% }
.col-12 { flex: 0 0 100% }