Membuat Grid Kolom Layout Dengan HTML5 dan CSS3

Dalam membangun sebuah layout web maka sangat dibutuhkan kolom-kolom dalam sebuah disain dan kolom-kolom tersebut akan diisi komponen seperti sidebar, main artikel, kolom-kolom footer dan header dan lain-lain, kolom-kolom tersebut disebut dengan grid yang sangat umum dijumpai pada css framework seperti bootstrap, uikit, metro ui css, materialize css, semantic ui dan lain-lain.

Untuk membuat grid atau kolom-kolom untuk desain sebuah web maka buatkanlah sebuah dokumen html dengan nama index.html dan gunakan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Grid Web Column</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-12"><div class="panel"> Col 12</div></div>
  </div>
  <div class="row">
    <div class="col-6"><div class="panel"> Col 6</div></div>
    <div class="col-6"><div class="panel"> Col 6</div></div>
  </div>
  <div class="row">
    <div class="col-4"><div class="panel"> Col 4</div></div>
    <div class="col-4"><div class="panel"> Col 4</div></div>
    <div class="col-4"><div class="panel"> Col 4</div></div>
  </div>
  <div class="row">
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
  </div>
  <div class="row">
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
  </div>
  <div class="row">
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
  </div>
  <div class="row">
    <div class="col-11"><div class="panel"> Col 11</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
  </div>
  <div class="row">
    <div class="col-10"><div class="panel"> Col 10</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
  </div>
  <div class="row">
    <div class="col-9"><div class="panel"> Col 9</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
  </div>
  <div class="row">
    <div class="col-8"><div class="panel"> Col 8</div></div>
    <div class="col-4"><div class="panel"> Col 4</div></div>
  </div>
  <div class="row">
    <div class="col-7"><div class="panel"> Col 7</div></div>
    <div class="col-5"><div class="panel"> Col 5</div></div>
  </div>
  <div class="row">
    <div class="col-6"><div class="panel"> Col 6</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
  </div>

</div>

</body>
</html>

Selanjutnya disain tampilan menggunakan css, buatkanlah sebuah file css dengan nama style.css kemudian simpan file tersebut bersamaan dengan file index.html dan gunakan kode dibawah ini.

*{
  box-sizing:border-box;
}
body{
  font-family:helvetica,sans-serif,arial;
}
.container{
  width: 800px;
  margin: auto;
}
.container-fluid{
  padding: 20px;
  margin:0;
}
.row:after{
  content: " ";
  display: block;
  clear: both;
}
[class*="col-"]{
  float: left;
  padding-right: 15px;
}
[class*="col-"]:last-of-type{
  padding-right: 0;
}
.col-1{width: 8.33%}
.col-2{width: 16.66%}
.col-3{width: 25%}
.col-4{width: 33.33%}
.col-5{width: 41.66%}
.col-6{width: 50%}
.col-7{width: 58.33%}
.col-8{width: 66.66%}
.col-9{width: 75%}
.col-10{width: 83.33%}
.col-11{width: 91.66%}
.col-12{width: 100%}
.panel{
  padding: 10px;
  margin-top:10px;
  background-color: #ddd;
  border:1px solid #ccc;
}
@media screen and (max-width: 485px){
  .container, .container-fluid{
    width: 100%;
  }
  [class*="col-"]{
    width: 100%;
    padding-right: 0;
    float: none;
  }
}
@media screen and (max-width: 800px){
  .container, .container-fluid{
    width: 100%;
  }
}