Grid layout(using floats)

In this example below you will see how to do a Grid layout(using floats) 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
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Grid layout(using floats)</title>
      <link rel="stylesheet" href="css/style.css">



  <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 {
  margin: 0;
  font-size: 0;
.column {
  float: left;
  height: 300px;
  background: red;
  width: 8.33%;
  text-align: center;
  font-size: 15px;
  outline: 1px solid white;
  line-height: 300px;
.column h3 {
  margin: 0;