Sample Flex Grid Application

Sample Flex Grid Application

HTML

<head>
    <title>Sample Flex Grid Application</title>

    <style>
        .flex-grid > div {
            height: 50px;
            background: #E8EAF6;
            text-align: center;
            padding: 10px;
            box-shadow: -1px 2px 7px 0 rgba(0, 0, 0, .6);
            font-family: 'Roboto', sans-serif;
            font-size: 25px;
            line-height: 25px;
        }
    </style>
</head>
<body>

<div class="flex-grid">
    <div class="col-3">.col-3</div>
    <div class="col-2">.col-2</div>
    <div class="col-1">.col-1</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-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>

</body>

CSS

.flex-grid {
  display: flex;
  flex-flow: wrap;
}

.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%}

[class*="col-"] {
  margin: 0 0 10px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}