Close Menu

Layout dengan CSS

Table of Contents

Mengatur layout atau tata letak elemen di halaman web adalah salah satu kemampuan utama CSS. Ada beberapa teknik dan properti CSS yang dapat digunakan untuk mengatur layout, termasuk penggunaan properti display, position, float, dan model layout modern seperti Flexbox dan Grid.

Display #

Properti display digunakan untuk mengontrol bagaimana elemen ditampilkan di halaman.

Block: Elemen ditampilkan sebagai blok, mengambil seluruh lebar yang tersedia.

.block {
    display: block;
}

Inline: Elemen ditampilkan dalam satu baris bersama elemen lain.

.inline {
    display: inline;
}

Inline-block: Elemen ditampilkan dalam satu baris, tetapi tetap bisa diatur lebar dan tingginya.

.inline-block {
    display: inline-block;
    width: 100px;
    height: 100px;
}

None: Elemen tidak ditampilkan.

.hidden {
    display: none;
}

Position #

Properti position digunakan untuk mengatur posisi elemen di halaman.

Static: Nilai default. Elemen diatur secara normal dalam aliran dokumen.

.static {
    position: static;
}

Relative: Elemen diatur relatif terhadap posisi aslinya.

.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

Absolute: Elemen diatur relatif terhadap elemen induk terdekat yang posisinya selain static.

.absolute {
    position: absolute;
    top: 50px;
    left: 100px;
}

Fixed: Elemen diatur relatif terhadap viewport (jendela browser).

.fixed {
    position: fixed;
    top: 0;
    right: 0;
}

Sticky: Elemen diatur berdasarkan posisi scroll pengguna.

.sticky {
    position: sticky;
    top: 0;
}

Float #

Properti float digunakan untuk mengatur elemen agar mengalir di sebelah kiri atau kanan elemen induknya.

Float Left:

.float-left {
    float: left;
}

Float Right:

.float-right {
    float: right;
}

Clear: Menghapus pengaruh float pada elemen berikutnya.

.clear {
    clear: both;
}

Flexbox #

Flexbox adalah model layout modern yang sangat kuat dan fleksibel untuk mengatur tata letak elemen dalam satu dimensi (baris atau kolom).

Container: Elemen induk yang menggunakan flexbox.

.flex-container {
    display: flex;
    justify-content: space-between; /* Mengatur spasi antara elemen */
    align-items: center; /* Mengatur elemen di tengah secara vertikal */
}

Items: Elemen anak di dalam flex container.

.flex-item {
    flex: 1; /* Mengatur elemen untuk mengambil ruang yang tersedia */
}

Contoh Penggunaan Flexbox #

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: lightblue;
            height: 100px;
        }

        .flex-item {
            background-color: lightcoral;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>

CSS Grid #

CSS Grid adalah model layout dua dimensi yang memungkinkan pengaturan tata letak elemen dalam baris dan kolom.

Container: Elemen induk yang menggunakan grid.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolom dengan lebar yang sama */
    gap: 10px; /* Jarak antara elemen grid */
}

Items: Elemen anak di dalam grid container.

.grid-item {
    background-color: lightcoral;
    padding: 20px;
    text-align: center;
}

Contoh Penggunaan CSS Grid #

<!DOCTYPE html>
<html>
<head>
    <title>Contoh CSS Grid</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background-color: lightblue;
            padding: 10px;
        }

        .grid-item {
            background-color: lightcoral;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
    </div>
</body>
</html>

Dengan menggunakan berbagai teknik dan properti layout ini, Anda dapat mengatur tampilan halaman web Anda dengan lebih fleksibel dan efisien. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

What are your Feelings