Grid layout(using flex-boxes)

In this example below you will see how to do a Grid layout(using flex-boxes) with some HTML / CSS and Javascript

This awesome code was written by vovant123, you can see more from this user in the personal repository.
You can find the original code on
Copyright vovant123 ©
  • HTML
  • CSS
  • JavaScript
  <div class="row">
    <div class="column"><h3>1</h3></div>
    <div class="column"><h3>2</h3></div>
    <div class="column"><h3>3</h3></div>
    <div class="column"><h3>4</h3></div>
    <div class="column"><h3>5</h3></div>
    <div class="column"><h3>6</h3></div>
    <div class="column"><h3>7</h3></div>
    <div class="column"><h3>8</h3></div>
    <div class="column"><h3>9</h3></div>
    <div class="column"><h3>10</h3></div>
    <div class="column"><h3>11</h3></div>
    <div class="column"><h3>12</h3></div>

/*Downloaded from */
    .row {
  display: flex;
  flex-wrap: wrap; 
.column {
  background: red;
  height: 300px;
  width: 8.33%;
  outline: 1px solid white;
  text-align: center;
  line-height: 300px;
.column h3 {
  margin: 0;

/*Downloaded from */