DaunKoder
CSS

Belajar CSS: Pengaturan Tata Letak/Layouting Sederhana

Agar Halaman web kita rapi, tentu dibutuhkan penayaan komponen. Penataan komponen dalam CSS ada berbagai cara. Pada artikel kali ini saya akan membahas tentang penataan komponen yang sangat sederhana pada CSS.

Display

Properti display menentukan cara untuk merender sebuah komponen. Properti ini dapat diisi dengan nilai berikut:

  • inline, membuat komponen seperi <a> dan properti width dan height tidak mempunyai efek.
  • block, membuat komponen seperti <div> dan membuat baris baru. Ini menggunakan seluruh panjang viewport. Panjang dan lebar komponen dapat diatur menggunakan properti width dan height.
  • inline-block, seperti block tapi tidak membuat baris baru.
  • none, komponen tidak di render
  • flex, menggunakan CSS Flex Box.
  • inline-flex, seperti flex tapi tidak membuat baris baru
  • grid, Menggunakan CSS Grid.
  • inline-grid, sepeti grid tapi tidak membuat baris baru

Contoh:

<style>
    .box {
        width: 50px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        background: darkgreen;
        color: white;
    }

    .inline {
        display: inline;
    }

    .block {
        display: block;
    }

    .inline-block {
        display: inline-block;
    }

    .none {
        display: none;
    }
</style>

<p>Diplay Inline</p>
<div class="box inline">Satu</div>
<div class="box inline">Dua</div>
<div class="box inline">Tiga</div>

<p>Display Block</p>
<div class="box block">Satu</div>
<div class="box block">Dua</div>
<div class="box block">Tiga</div>

<p>Display Inline Block</p>
<div class="box inline-block">Satu</div>
<div class="box inline-block">Dua</div>
<div class="box inline-block">Tiga</div>

<p>Display None</p>
<div class="box none">Satu</div>
<div class="box none">Dua</div>
<div class="box none">Tiga</div>

Menjadi:

Hasil Conoth Kode Display

Float

Properti float menentukan posisi komponen harus mengambang atau berada pada sisi mana. Saat menggunakan properti ini ukuran komponen dapat melebihi komponen induk. Properti ini dapat diisi dengan nilai berikut:

  • left, mengambang di kiri
  • right, mengambang di kanan
  • none, tidak mengambang (default)

Contoh:

<style>
    img {
        width: 100px;
        height: 100px;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }
</style>

<p>Tanpa Float</p>
<p>
    <img src="./img/pisang.jpg">
Duis aliqua ut ea deserunt. Nulla laboris consectetur do enim dolore elit. Esse Lorem aute mollit eiusmod culpa ut nisi amet fugiat magna.
Cupidatat Lorem adipisicing sunt veniam culpa.Magna quis officia cupidatat elit.Quis dolore occaecat pariatur tempor labore laboris voluptate sint pariatur ut.
</p>

<p>Float Left</p>
<p>
    <img class="float-left" src="./img/pisang.jpg">
Duis aliqua ut ea deserunt. Nulla laboris consectetur do enim dolore elit. Esse Lorem aute mollit eiusmod culpa ut nisi amet fugiat magna.
Cupidatat Lorem adipisicing sunt veniam culpa.Magna quis officia cupidatat elit.Quis dolore occaecat pariatur tempor labore laboris voluptate sint pariatur ut.
</p>

<p>Float Right</p>
<p>
    <img class="float-right" src="./img/pisang.jpg">
Duis aliqua ut ea deserunt. Nulla laboris consectetur do enim dolore elit. Esse Lorem aute mollit eiusmod culpa ut nisi amet fugiat magna.
Cupidatat Lorem adipisicing sunt veniam culpa.Magna quis officia cupidatat elit.Quis dolore occaecat pariatur tempor labore laboris voluptate sint pariatur ut.
</p>

Menjadi:

Hasil Contoh Kode Float

Clear

Properti clear menentukan pada posisi mana komponen tidak bisa mengambang.. Properti ini dapat diisi dengan nilai berikut:

  • none, komponen didalamanya dapat mengambang di mana saja
  • left, komponen didalamnya tidak dapat mengambang di kiri
  • right, komponen didalamnya tidak dapat mengambang di kanan
  • both, komponen didalamnya tidak dapat mengambang di kiri dan kanan

Contoh:

<style>
  img {
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }

  p {
    border: 1px solid red;
  }

  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }

  .clear {
    clear: left;
  }
</style>

<p>Tanpa Clear</p>
<img class="float-left" src="./img/pisang.jpg" />
<img class="float-right" src="./img/pisang.jpg" />
<p>
    Reprehenderit aliqua officia aliqua non irure aute duis tempor voluptate. Aute
    cupidatat consequat cillum velit id in nulla.
</p>

</br>
<p>Dengan Clear</p>
<img class="float-left" src="./img/pisang.jpg" />
<p class="clear">
    Reprehenderit aliqua officia aliqua non irure aute duis tempor voluptate. Aute
    cupidatat consequat cillum velit id in nulla.
</p>

</br>
<p>Dengan Clear</p>
<img class="float-right" src="./img/pisang.jpg" />
<p class="clear">
    Reprehenderit aliqua officia aliqua non irure aute duis tempor voluptate. Aute
    cupidatat consequat cillum velit id in nulla.
</p>

Menjadi:

Hasil Contoh Kode Clear

Kesimpulan

Semoga artikel kali ini bermanfaat. Selanjutnya saya akan membahas CSS Flex Box dan CSS Grid yang merupakan cara pengaturan tata letak yang lebih lanjut dan keren.