Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Merapikan Kotak Grid Menggunakan Inline-block

Merapikan Kotak Grid Menggunakan Inline-blockSebagaimana sudah dijelaskan sebelumnya di Penggunaan Properti Float dan Clear dalam CSS, bahwa properti CSS Float sangat penting untuk mengatur posisi elemen HTML. Dengan float, elemen HTML bisa diatur tata letaknya. Contoh penggunaannya juga sudah disertakan pada postingan tersebut.

Penggunaan float mengharuskan kamu untuk menggunakan juga properti clear ketika akan membuat elemen HTML baru. Fungsi dari properti clear adalah untuk membersihkan elemen HTML baru dari pengaruh float elemen sebelumnya. Jika tidak menyisipkan properti clear, maka elemen HTML tersebut akan mengisi sisa ruang dari elemen HTML sebelumnya yang diberi efek float.

Satu hal lagi fungsi properti float yang lain adalah bisa memudahkan kita untuk membuat kotak grid tampil tetap rapi saat web browser di resize. Jadi dengan float, letak kotak-kotak grid akan menyesuaikan ukuran browser.

Selain dengan menggunakan properti float, ternyata ada cara lain yang lebih mudah untuk merapikan tampilan kotak grid. Mudah di sini maksudnya adalah lebih simpel dari segi penulisan codingnya. Karena untuk merapikan kotak grid menggunakan float, kita juga harus menyertakan properti clear untuk elemen html setelahnya agar bersih dari pengaruh float. Sedangkan dengan menggunakan inline-block, kita tidak perlu lagi mendefinisikan properti clear pada elemen HTML setelahnya.

Untuk lebih jelasnya, langsung saja lihat perbedaan antara merapikan tampilan kotak grid menggunakan float dan inline-block.

Merapikan kotak grid dengan float



<!DOCTYPE html>
<html>
<head>
<style>
.kotak-grid {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

.elemen-baru {
    clear: left;
    border: 3px solid red;      
}
</style>
</head>
<body>

<h2>Menggunakan float</h2>

<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>

<div class="elemen-baru">ini adalah elemen baru setelah kotak grid..</div>

</body>
</html>

Maka hasilnya :
merapikan kotak grid di css

Merapikan kotak grid dengan inline-block



<!DOCTYPE html>
<html>
<head>
<style>
.kotak-grid {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

.elemen-baru {
    border: 3px solid red;      
}
</style>
</head>
<body>

<h2>Menggunakan Inline-block</h2>

<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>
<div class="kotak-grid">kotak grid</div>

<div class="elemen-baru">ini adalah elemen baru setelah kotak grid..</div>

</body>
</html>

Hasilnya akan seperti ini :
merapikan kotak grid di css


Seperti yang terlihat, hasil tampilannya tetap sama. Hanya saja pada struktur kode inline-block tidak perlu menyertakan properti clear.

Itulah pembahasan kali ini tentang merapikan kotak grid menggunakan inline-block. Semoga bermanfaat buat konco sinahu semua.



0 Komentar untuk "Merapikan Kotak Grid Menggunakan Inline-block"

Back To Top