Calc() pembagian 3 kolom

Menggunakan fungsi calc() untuk membagi 3 kolom

Dibawah ini tampilan 3 kolom sebelum ditentukan ukuran width:calc().

Kontainer induk width: 100%; padding: 5px

Kolom 1width: 100%;

Kolom 2width: 100%;

Kolom 3width: 100%;

<div class='induk'>
  <div class='kolom'></div>
  <div class='kolom'></div>
  <div class='kolom'></div>
</div>

<style>
.induk {width: 100%; padding: 5px}
.kolom {padding: 5px; margin: 2px;}

</style>

Perhatikan nilai atribut pada contoh CSS diatas :
Nilai atribut yang nantinya menggeser posisi kolom adalah :

padding: 5px pada kontainer induk, menggeser elemen (kolom) agar tidak bersentuhan dengan border kontainer induk;

margin: 2px pada masing-masing kolom untuk memberi jarak antar kolom agar tidak menempel satu sama lain.

Maka nilai width untuk masing-masing kolom adalah :

100% nilai width kontainer induk, dibagi (/) 3 kolom dan
dikurangi (padding:5px + margin: 2px = 7px).
maka width: calc(100% / 3 - 7px)

<div class='induk'>
  <div class='kolom bagi'></div>
  <div class='kolom bagi'></div>
  <div class='kolom bagi'></div>
</div>

<style>
.induk {width: 100%; padding: 5px}
.kolom {padding:5px; margin: 2px;}
.bagi {width: calc(100% / 3 - 7px);}
</style>

Hasilnya :

Kolom 1width: calc(100% / 3 - 7px);

Kolom 2width: calc(100% / 3 - 7px);

Kolom 3width: calc(100% / 3 - 7px);

Untuk mengatur 3 kolom agar sejajar dalam 1 baris, gunakan atribut display:inline-block;

<div class='induk'>
  <div class='kolom bagi'></div>
  <div class='kolom bagi'></div>
  <div class='kolom bagi'></div>
</div>

<style>
.induk {width: 100%; padding: 5px}
.kolom {padding:5px; margin: 2px;}
.bagi {
    width: calc(100% / 3 - 7px);
    display: inline-block;
}
</style>

Dan hasilnya seperti ini :

Kolom 1

Kolom 2

Kolom 3

3 kolom tersebut menghasilkan tata letak responsive (Responsive Layout), apabila ukuran layar berubah maka posisi 3 kolom tidak akan berubah kecuali hanya akan tampak "memanjang" atau "memendek" tergantung ukuran layar perangkat.