Memahami Layouting CSS: Normal Flow, Position, Flexbox, Grid, dan Float

Halooo, di artikel ini gue mau ngebahas pemahaman gue tentang layouting di CSS. Perlu gue garis bawahi, pembahasan ini berdasarkan pemahaman gue sendiri, yang dasar pemahamannya gue pelajari di WPU, yang terus gue kembangin seiring proses penulisan artikel ini.

Gue juga cari referensi tambahan dan ngetes ulang pemahaman gue, termasuk dengan memvalidasinya ke ChatGPT. Jadi kalau nanti ada bagian yang kurang tepat atau bisa diperbaiki, silakan dikoreksi atau didiskusikan. Woke lanjut...

Kenapa pada layouting pada CSS itu penting dalam web development ? karena, mau pakai bahasa pemrograman apa pun JS, PHP, atau yang lain urusan styling di web hampir selalu menggunakan CSS. Dan untuk bisa ngatur tampilan dengan baik, memahami konsep layouting adalah langkah awal yang wajib.

Bahkan ketika menggunakan framework CSS seperti Bootstrap atau Tailwind, tetap saja kita perlu memahami konsep layouting pada CSS sebagai dasarnya agar framework tersebut bisa digunakan dengan benar.

Jujur aja, gue sendiri cukup sering lupa konsep layouting di CSS, apalagi syntax-nya. Nah, lewat konten ini gue juga ingin bikin catatan, biar kedepannya jikalau lupa bisa langsung inget lagi tanpa harus nyari google sana sini wkwk. Oke, nggak usah panjang lebar lagi, langsung aja kita bahas.

Apa Itu Layouting pada CSS?

Layouting CSS merupakan cara yang memungkinkan kita untuk mengontrol posisi elemen-elemen yang terdapat dalam halaman web, Ada beberapa cara yang dapat digunakan untuk Layouting halaman di css, yaitu normal flow, positioning, flexbox, css grid, dan float.

Kenapa float gue masukin? peratama mungkin pahami dulu ini.
Menurut dokumentasi MDN Web Docs, properti float awalnya dirancang untuk mengatur aliran teks di sekitar elemen, seperti gambar dalam artikel. Meskipun sempat digunakan untuk membuat layout kolom, sejak hadirnya Flexbox dan Grid, float kembali ke fungsi aslinya dan tidak lagi direkomendasikan sebagai sistem layout halaman.

Jadi float sempat digunakan untuk menyusun layout halaman. Namun, karena keterbatasannya, pendekatan ini kini dianggap legacy dan tidak lagi direkomendasikan untuk layout modern. terus kenapa gue tetap masukan kedalam pemabasan? di sini sebagai pemahaman tambahan bahwa properti ini masih valid dan tetap bisa digunakan, meskipun bukan sebagai sistem layout utama. Oke kita lanjut.

Sistem Layouting pada CSS

1. Normal Flow

Normal Flow adalah perilaku default browser dalam menampilkan elemen HTML, yang ditentukan oleh nilai atau properti display bawaan dari setiap elemen. Umumnya, nilai display ini berupa block, inline, atau inline-block dimana elemen akan ditampilkan mengikuti urutan penulisan di dalam dokumen HTML.

Jadi Selama tidak menggunakan properti layout seperti position, flex, grid,atau float elemen akan tetap berada di dalam Normal Flow. Artinya, elemen masih saling memengaruhi posisi satu sama lain secara alami.

Untuk Normal Flow sendiri, sebenarnya terdapat beberapa jenis, bukan hanya block, inline, dan inline-block. Nilai display lain seperti table, list-item, dan turunannya juga masih termasuk dalam Normal Flow, selama elemen tersebut tetap mengikuti alur dokumen dan tidak menggunakan sistem layout khusus seperti Flexbox atau Grid.

Tapi gue bakal jelasin yang umumnya dipake untuk layouting pada normal flow itu biasanya ada 3, yaitu block, inline, dan inline-block.

1.1 display: block

Elemen dengan display: block akan menempati satu baris penuh dan selalu dimulai dari baris baru. Elemen berikutnya akan otomatis berada di bawahnya.

Contoh elemen block:

div
p
h1

Elemen dengan display: block cocok digunakan untuk struktur utama halaman seperti section, paragraf, atau container. Untuk contoh-contoh selanjutnya, gue bakal menggunakan Embedded CSS atau Inline CSS agar lebih mudah dipahami.
Perlu dicatat, pada contoh ini tag <style> gue taruh di dalam <body> supaya lebih gampang dicontohkan. Secara teknikal hal ini sah dan tetap berjalan, namun sesuai standar HTML, sebaiknya tag <style> diletakkan di dalam <head>.

Coba perhatikan code berikut.

<body style="border: 5px solid red;padding-bottom: 200px;">
    <style>
        div {
            background-color: #f1f1f1;
            border: 5px solid black;
            padding: 5px;
            font-size: 20px;
            margin: 2px;
        }
    </style>
    <div>div-1</div>
    <div>div-2</div>
</body>

Hasilnya Div-2 berada pada baris yang berbeda karena elemen div secara default memiliki display: block. Perilaku block akan membuat setiap elemen selalu dimulai pada baris baru ketika dirender oleh browser.

Elemen dengan display: block secara default akan melebar mengikuti lebar parent-nya. namun kita tetap bisa mengatur widthnya. contohnya:

<body style="border: 5px solid red;padding-bottom: 200px;">
    <style>
        div {
            background-color: #f1f1f1;
            border: 5px solid black;
            padding: 5px;
            font-size: 20px;
            margin: 2px;
        }
    </style>
    <div style="width: 100px;">div-1</div>
    <div>div-2</div>
</body>

1.2 display: inline

Elemen dengan display: inline akan tampil sebaris mengikuti teks dan tidak membuat baris baru. Ukurannya mengikuti isi konten dan tidak bisa diatur width atau height, berbeda dengan elemen block seperti yang di contohkan sebelumnya.

Contoh elemen inline:

span
a
strong

inline cocok untuk menandai atau memodifikasi bagian kecil dari teks, contohnya:

<body style="border: 5px solid red;padding-bottom: 200px;">
    <style>
        span {
            background-color: lightgreen;
        }

        p {
            background-color: lightsalmon;
        }
    </style>

    <!-- Contoh 1 -->
    <p>
        Ini adalah contoh
        <span>kata penting</span>
        di dalam sebuah paragraf.
    </p>

    <!-- Contoh 2 -->
    <span style="width: 200px;">span-1</span>
    <span>span-2</span>
</body>

Penjelasannya:

Contoh 1.

<!-- Contoh 1 -->
<p>
    Ini adalah contoh
    <span>kata penting</span>
    di dalam sebuah paragraf.
</p>

Elemen <span> adalah elemen inline, yang berarti elemen ini mengalir sebaris mengikuti teks dan tidak membuat baris baru, cocok untuk menandai atau memodifikasi bagian kecil dari teks. Inilah fungsi utama elemen inline.

Contoh 2

<!-- Contoh 2 -->
<span style="width: 200px;">span-1</span>
<span>span-2</span>

Walaupun width: 200px ditambahkan pada span-1 Lebar elemen tidak berubah, Ini terjadi karena elemen inline mengabaikan properti width dan height,Ukuran elemen tetap mengikuti isi teks, dan tidak membuat baris baru di tiap span di render.

1.3 display: inline-block

Elemen dengan display: inline-block merupakan gabungan dari block dan inline. Elemen tetap tampil sebaris seperti inline, tetapi bisa diatur width dan height seperti block.

Contoh penggunaan:

Button
Badge (Custom CSS)
Elemen kecil yang sejajar(Custom CSS)

inline-block cocok ketika kita ingin elemen tampil sebaris namun tetap memiliki ukuran yang bisa dikontrol, berikut contoh implementasinya:

<body style="border: 5px solid red;padding-bottom: 200px;">
    <p>
        Silakan klik
        <button
            style="width: 140px;height: 60px;background: #4f46e5;color: white;border: none;border-radius: 6px;cursor: pointer;">
            Tombol Aksi
        </button>
        untuk melanjutkan proses.
    </p>
</body>

Dari contoh di atas terlihat bahwa <button> bersifat inline-block. Elemen ini tetap tampil sebaris seperti inline, tetapi ukurannya bisa diatur (width dan height) layaknya elemen block.

2. Positioning

Positioning adalah mekanisme dalam CSS untuk mengatur posisi elemen di dalam sebuah halaman web. Untuk mengatur posisi elemen, kita menggunakan properti position. Dengan positioning, kita tidak hanya menentukan bagaimana elemen ditampilkan, tetapi juga di mana elemen tersebut diletakkan.

Secara default, browser menampilkan elemen mengikuti normal flow, yaitu urutan penulisan HTML dari atas ke bawah dan dari kiri ke kanan. Ketika kita menggunakan CSS positioning, aturan normal flow ini dapat ditimpa (override), sehingga elemen tidak selalu mengikuti alur dokumen normal dan dapat diposisikan secara lebih fleksibel. berikut jenis position :

2.1 position: static

position: static sepenuhnya masih berada di normal flow. Elemen tampil apa adanya dan mengikuti urutan penulisan HTML. Nilai static merupakan nilai default dari properti position pada semua elemen HTML.

<body style="border: 5px solid red;padding-bottom: 200px;">
    <div style="border:5px solid black; padding:8px;">
        Elemen static (default)
    </div>
</body>

2.2 position: relative

position: relative masih berada di normal flow, tetapi posisinya dapat digeser dari posisi aslinya menggunakan properti top, right, bottom, atau left. Elemen lain tidak ikut bergeser, karena ruang elemen tetap dipertahankan pada posisi awalnya. berikut contoh penggunaanya:

<body style="border: 5px solid red;padding-bottom: 200px;">
    <div style="position: relative;top: 20px;left: 50%;border: 5px solid black; width: 200px;background-color: yellow;">
        Elemen relative
    </div>
    <div style="background-color: lightgreen; border: 5px solid black;">Elemen Lain</div>
</body>

Pada contoh di atas, elemen <div> menggunakan position: relative, sehingga elemen tersebut masih berada di dalam normal flow, namun posisinya digeser dari posisi aslinya.

Gambar di sebelah kiri menunjukkan kondisi sebelum position: relative diterapkan. Setelah properti tersebut ditambahkan, elemen relative berpindah secara visual, tetapi tetap mempertahankan ruang aslinya di dalam layout, posisi elemen lain tidak terpengaruh.

Properti top: 20px menggeser elemen relative 20 piksel ke bawah, sedangkan left: 50% menggeser elemen ke kanan sebesar 50% lebar parent/container. Meskipun secara visual elemen berpindah posisi, ruang awal elemen tetap dipertahankan, sehingga elemen lain tidak terpengaruh.

2.3 position: absolute

position: absolute adalah mekanisme positioning yang membuat elemen keluar dari normal flow, sehingga elemen tersebut tidak mempertahankan ruang aslinya di dalam layout dan tidak memengaruhi posisi elemen lain.

Contoh 1

<body style="border: 5px solid red; padding-bottom: 200px;">
    <div style="border: 5px solid blue;margin-top: 50px;">
        Parent static
        <div style="position: absolute;top: 0;left: 0;border: 5px solid black;width: 200px;background-color: yellow;">
            Elemen absolute
        </div>
    </div>
    <div style="background-color: lightgreen;border: 5px solid black;">
        Elemen Lain
    </div>
</body>

Pada contoh di atas, elemen absolute secara struktur berada di dalam parent yang bersifat static. Namun, karena menggunakan position: absolute, elemen tersebut keluar dari normal flow. Akibatnya, elemen ini tidak mempertahankan ruang aslinya di dalam layout, dan elemen lain akan berperilaku seolah elemen tersebut tidak ada.

Properti top: 0 dan left: 0 memposisikan elemen di sudut kiri atas. Karena tidak ada ancestor yang memiliki nilai position selain static, maka posisi elemen absolute ini tidak mengacu pada parent, melainkan pada ICB (Initial Containing Block).

Initial Containing Block (ICB) adalah containing block paling luar yang dibuat browser saat halaman dirender. Ukurannya mengikuti viewport, dan titik koordinat (0,0)-nya berada di pojok kiri atas viewport. Inilah sebabnya elemen absolute dapat terlihat berada di luar border parent.

Elemen lain yang berwarna hijau tetap berada di posisi normalnya dan tidak terpengaruh oleh elemen absolute.

Contoh 2

Elemen dengan position: absolute akan diposisikan relatif terhadap ancestor terdekat yang memiliki nilai position selain static. Ancestor tersebut bisa berupa parent langsung atau elemen lain di atasnya selama masih berada dalam struktur DOM.

Jika tidak ada ancestor yang memiliki nilai position selain static, maka elemen absolute akan diposisikan relatif terhadap body (atau viewport).

Pada contoh pertama, elemen absolute mengacu ke body karena tidak ada ancestor yang diposisikan. Akibatnya, properti top, left, right, dan bottom dihitung berdasarkan ukuran dan posisi halaman, bukan berdasarkan container tertentu.

Berikut contoh elemen absolute yang memiliki ancestor non-static:

<body style="border: 5px solid red; padding-bottom: 200px;">
    <div style="position: relative; border: 5px solid blue;margin-top: 50px;">
        Parent static
        <div style="position: absolute;top: 0;left: 0;border: 5px solid black;width: 200px;background-color: yellow;">
            Elemen absolute
        </div>
    </div>
    <div style="background-color: lightgreen;border: 5px solid black;">
        Elemen Lain
    </div>
</body>

Pada contoh ke-2, elemen absolute secara visual berada di dalam parent karena ancestor-nya menggunakan position: relative. Dengan adanya ancestor non-static, elemen absolute menjadi relatif terhadap parent tersebut, bukan lagi terhadap viewport atau Initial Containing Block (ICB).

Properti top: 6px dan left: 0 memposisikan elemen absolute di dalam area parent, sehingga secara visual terlihat menumpuk atau menutupi sebagian area parent. Meskipun demikian, elemen absolute tetap keluar dari normal flow, sehingga tidak memengaruhi posisi elemen lain.

Hal ini berbeda dengan contoh pertama, di mana elemen absolute diposisikan relatif terhadap viewport (atau secara teknis terhadap ICB), karena tidak ada ancestor yang memiliki nilai position non-static.

2.4 position: fixed

position: fixed digunakan ketika kita ingin sebuah elemen tetap berada di posisi tertentu pada layar, tidak peduli halaman di-scroll sejauh apa pun. Berbeda dengan absolute atau relative yang masih bergantung pada parent atau alur dokumen, elemen dengan fixed diposisikan relatif terhadap viewport (layar browser).
Artinya, saat user melakukan scroll, elemen ini akan tetap “nempel” di tempatnya. Karena itu, position: fixed sering dipakai untuk elemen seperti navbar, floating button, atau informasi penting yang harus selalu terlihat oleh user. berikut contohnya:

<body style="border: 5px solid red; padding-bottom: 800px;">
    <div style="border: 5px solid blue;">
        Element-1
    </div>
    <div
        style="position: fixed;top: 20px;right: 20px;border: 5px solid black;width: 200px;background-color: yellow;padding: 10px;">
        Element-2 (Fixed)
    </div>
    <div style="background-color: coral; border: 5px solid black; ">
        Element-3
    </div>
    <div style="background-color: orange; border: 5px solid black; ">
        Element-4
    </div>
    <div style="background-color: lightgreen; border: 5px solid black; ">
        Element-5
    </div>
</body>

Pada gambar sebelah kiri (sebelum di-scroll), semua elemen masih berada di posisi awalnya. Element-2 (Fixed) belum menunjukkan perbedaan yang signifikan karena halaman belum bergerak. Pada kondisi ini, position: fixed terlihat mirip dengan position: absolute karena sama-sama keluar dari flow dokumen dan tampak mengambang di atas elemen lain.

Namun pada gambar sebelah kanan (setelah halaman di-scroll), elemen lain ikut bergeser mengikuti alur dokumen, sedangkan Element-2 (Fixed) tetap berada di posisi yang sama pada layar. Hal ini terjadi karena position: fixed memposisikan elemen relatif terhadap viewport (layar browser), bukan terhadap parent atau konten di sekitarnya.

Inilah yang membuat position: fixed cocok digunakan untuk elemen yang harus selalu terlihat, seperti navbar atau floating button.

2.5 position: sticky

position: sticky adalah gabungan perilaku antara relative dan fixed. Secara default, elemen sticky akan berperilaku seperti elemen biasa dan tetap mengikuti alur dokumen. Namun saat halaman di-scroll dan elemen mencapai batas yang ditentukan (misalnya top), elemen tersebut akan menempel di layar.

Berbeda dengan absolute, position: sticky tidak membutuhkan parent dengan position non-static. Elemen sticky tetap bekerja selama parent-nya tidak memiliki overflow yang memotong scroll.

<body style="border: 5px solid red; padding-bottom: 800px;">
    <div style="border: 5px solid blue; margin-top: 50px;">
        <div style="
            position: sticky;
            top: 0;
            background-color: yellow;
            border: 5px solid black;
            padding: 10px;
        ">
            Element-1 Sticky
        </div>
        <div style="background-color: coral; border: 5px solid black; height: 50px;">
            Element-2
        </div>
        <div style="background-color: orange; border: 5px solid black; height: 50px;">
            Element-3
        </div>
        <div style="background-color: lightgreen; border: 5px solid black; height: 50px;">
            Element-4
        </div>
    </div>
</body>

Pada gambar sebelum di-scroll, Element-1 Sticky masih berperilaku seperti elemen biasa. Posisi elemen ini mengikuti alur dokumen dan berada di tempat awalnya bersama elemen lain di dalam container.

Pada gambar saat setengah scroll, Element-1 Sticky mulai mencapai batas yang ditentukan (top: 0). Pada titik ini, perilaku elemen berubah: elemen berhenti ikut bergerak dan mulai menempel di bagian atas layar, meskipun konten lain di bawahnya terus bergeser.

Pada gambar saat scroll habis, Element-1 Sticky tetap berada di posisi menempel selama masih berada di dalam area parent-nya. Ketika area parent sudah selesai di-scroll, elemen sticky ikut berhenti dan menghilang, tidak seperti position: fixed yang tetap menempel di seluruh halaman.

Dari tahapan ini terlihat bahwa position: sticky bekerja bertahap: bergerak normal → menempel → berhenti saat parent selesai. Inilah yang membuat position: sticky cocok untuk elemen yang hanya perlu “nempel sementara” di dalam satu section tertentu.

3. Flexbox (Flexible Box Layout)

Flexbox adalah model layout CSS untuk mengatur elemen-elemen di dalam sebuah container secara fleksibel dan responsif, baik secara horizontal maupun vertikal. Dengan Flexbox kita bisa mendesain layout yang adaptif dan mudah disusun tanpa perlu menggunakan float atau position manual.

Flexbox bekerja berdasarkan konsep Flexbox Components. Sebuah layout Flexbox selalu terdiri dari dua bagian utama, yaitu Flex Container dan Flex Items.

Flex Container adalah elemen parent yang diberi properti display: flex atau display: inline-flex. Elemen inilah yang bertugas mengatur tata letak child di dalamnya.
Flex Items adalah satu atau lebih elemen anak langsung dari flex container. Semua child langsung tersebut secara otomatis menjadi flex item dan akan disusun menggunakan aturan Flexbox.

Dengan konsep ini, Flexbox memusatkan pengaturan layout pada container, sementara item hanya mengikuti aturan yang ditetapkan oleh parent-nya. contoh:

<body style="border: 5px solid red; padding: 20px;">
    <div style="display: flex;border: 5px solid blue;padding: 10px;gap: 10px;">
        <div style="background-color: lightgreen; padding: 20px;">
            Flex Item 1
        </div>
        <div style="background-color: lightcoral; padding: 20px;">
            Flex Item 2
        </div>
        <div style="background-color: lightblue; padding: 20px;">
            Flex Item 3
        </div>
    </div>
</body>

3.1 Arah utama dan arah silang (main axis & cross axis)

Dalam Flexbox, penyusunan elemen selalu mengikuti dua sumbu, yaitu main axis dan cross axis. Kedua sumbu ini menjadi dasar bagaimana flex item disusun dan disejajarkan di dalam flex container.

Main axis adalah arah utama penyusunan flex item
Cross axis adalah arah yang tegak lurus terhadap main axis

Secara default, Flexbox menggunakan flex-direction: row;

Artinya:

Main axis: dari kiri ke kanan
Cross axis: dari atas ke bawah

Berikut contohnya:

<body style="border:5px solid red;padding:20px;">
    <div style="margin-bottom:20px;">
        <strong>row</strong>
        <div style="display:flex;width:90%;border:3px solid black;padding:10px;"> <!--container-->
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-1</div>
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-2</div>
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-3</div>
        </div>
    </div>
    <div style="margin-bottom:20px;">
        <strong>row-reverse</strong>
        <div style="display:flex;flex-direction:row-reverse;width:90%;border:3px solid black;padding:10px;"> <!--container-->
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-1</div>
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-2</div>
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-3</div>
        </div>
    </div>
    <div style="margin-bottom:20px;">
        <strong>column</strong>
        <div style="display:flex;flex-direction:column;width:90%;border:3px solid black;padding:10px;"> <!--container-->
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-1</div>
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-2</div>
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-3</div>
        </div>
    </div>
    <div>
        <strong>column-reverse</strong>
        <div style="display:flex;flex-direction:column-reverse;width:90%;border:3px solid black;padding:10px;"> <!--container-->
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-1</div>
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-2</div>
            <div style="width:40px;border:2px solid black;padding:8px;white-space: nowrap;">Item-3</div>
        </div>
    </div>
</body>

Pada contoh di atas, setiap kotak besar berfungsi sebagai flex container yang mengatur penyusunan item di dalamnya menggunakan properti flex-direction. Pada kondisi row, item disusun secara horizontal dari kiri ke kanan mengikuti urutan penulisan di HTML. Ketika diubah menjadi row-reverse, arah penyusunan tetap horizontal tetapi urutannya dibalik dari kanan ke kiri.

Pada column, arah utama penyusunan berubah menjadi vertikal dari atas ke bawah, sehingga item ditumpuk ke bawah sesuai urutan HTML. Sementara itu, column-reverse tetap menggunakan arah vertikal namun urutannya dibalik, dimulai dari bawah ke atas. Perubahan ini hanya memengaruhi arah dan urutan visual, bukan struktur HTML-nya.

Contoh ini menunjukkan bahwa flex-direction menentukan arah main axis pada Flexbox. Seluruh flex item akan disusun mengikuti arah tersebut, sedangkan cross axis selalu berada tegak lurus terhadap main axis.

Visual di bawah ini memperlihatkan dengan jelas perbedaan arah main axis dan cross axis pada masing-masing nilai flex-direction.

3.2 Properti pada flex container

display: flex

display adalah pintu masuk Flexbox. Saat sebuah elemen diberi display: flex, elemen tersebut berubah menjadi flex container, dan semua anak langsungnya otomatis menjadi flex item.

- Item tidak lagi mengikuti flow normal block/inline
- Browser mulai menyusun item berdasarkan main axis dan cross axis

Perlu dicatat, display: flex tidak turun ke elemen cucu. Artinya, hanya child langsung yang terpengaruh oleh Flexbox.

<body style="border: 5px solid red; padding-bottom: 800px;">
    <div style="display: inline-flex;border: 5px solid blue;padding: 10px;gap: 10px;">
        <div style="border:5px solid black;padding:3px">Element-1</div>
        <div style="border:5px solid black;padding:3px">Element-2</div>
        <div style="border:5px solid black;padding:3px">Element-3</div>
    </div>
    <div style="display: inline-flex;border: 5px solid lightgreen;padding: 10px;gap: 10px; width: 500px;">
        <div style="border:5px solid black;padding:3px">Element-1</div>
        <div style="border:5px solid black;padding:3px">Element-2</div>
        <div style="border:5px solid black;padding:3px">Element-3</div>
    </div>
    <div style="display: flex;border: 5px solid orange;padding: 10px;gap: 10px;">
        <div style="border:5px solid black;padding:3px">Element-1</div>
        <div style="border:5px solid black;padding:3px">Element-2</div>
        <div style="border:5px solid black;padding:3px">Element-3</div>
    </div>
</body>

Pada flex box selain display: flex ada display: inline-flex , inline-flex tetap membuat elemen menjadi flex container, tetapi secara eksternal ia berperilaku seperti elemen inline.

Artinya:

- Lebar container mengikuti konten
- Bisa sejajar dengan teks atau elemen inline lain
- Tidak memaksa baris baru

perilaku Flexbox-nya sama persis dengan display: flex. Perbedaan utamanya bukan di Flexbox, tapi di sifat block vs inline.

flex-direction

Seperti yang dibahas sebelumnya, flex-direction menentukan arah utama layout (main axis). Semua perhitungan posisi item dimulai dari properti ini.

Saat flex-direction diatur:

- row → item disusun horizontal dari kiri ke kanan (default)
- row-reverse → item disusun horizontal dari kanan ke kiri
- column → item disusun vertikal dari atas ke bawah
- column-reverse → item disusun vertikal dari bawah ke atas

Perubahan flex-direction mengubah cara kerja properti lain, seperti: justify-content dan align-items Itulah kenapa Flexbox tidak bisa dipahami per properti saja, tapi harus sebagai satu sistem axis. Contohnya liat di 3.1 di atas.

flex-wrap

flex-wrap mengatur apakah item boleh pindah baris atau tidak. Secara default, Flexbox berusaha memaksa semua item tetap dalam satu baris, meskipun harus mengecil atau overflow.

<body style="border: 5px solid red; padding-bottom: 800px;">
    <!-- nowrap (default) -->
    <div style="display: flex;flex-wrap: nowrap;width: 260px;border: 5px solid blue;padding: 10px;gap: 10px;margin-bottom: 20px;">
        <div style="width:120px;border:5px solid black;padding:3px">Element-1</div>
        <div style="width:120px;border:5px solid black;padding:3px">Element-2</div>
        <div style="width:120px;border:5px solid black;padding:3px">Element-3</div>
    </div>

    <!-- wrap -->
    <div style="display: flex;flex-wrap: wrap;width: 260px;border: 5px solid lightgreen;padding: 10px;gap: 10px;margin-bottom: 20px;">
        <div style="width:120px;border:5px solid black;padding:3px">Element-1</div>
        <div style="width:120px;border:5px solid black;padding:3px">Element-2</div>
        <div style="width:120px;border:5px solid black;padding:3px">Element-3</div>
    </div>

    <!-- wrap-reverse -->
    <div style="display: flex;flex-wrap: wrap-reverse;width: 260px;border: 5px solid orange;padding: 10px;gap: 10px;">
        <div style="width:120px;border:5px solid black;padding:3px">Element-1</div>
        <div style="width:120px;border:5px solid black;padding:3px">Element-2</div>
        <div style="width:120px;border:5px solid black;padding:3px">Element-3</div>
    </div>
</body>

- flex-wrap: nowrap

Pada container pertama, Flexbox menggunakan nilai default nowrap. Yang terjadi:

- - Semua item dipaksa berada dalam satu baris
  - Lebar item tetap, sehingga item ketiga keluar dari container
  - Flexbox tidak membuat baris baru, meskipun ruang tidak cukup

- - row → item disusun horizontal dari kiri ke kanan (default)

- flex-wrap: wrap

Pada container kedua, flex-wrap diubah menjadi wrap. Yang terjadi:

- - Item yang tidak muat turun ke baris berikutnya
  - Container kini memiliki lebih dari satu baris
  - Setiap baris tetap disusun menggunakan Flexbox

Di sinilah konsep multi-baris Flexbox mulai berlaku.

- flex-wrap: wrap-reverse

Pada container ketiga, digunakan wrap-reverse. Yang terjadi:

- - Item tetap membentuk beberapa baris
  - Tetapi arah cross axis dibalik
  - Baris baru muncul dari arah yang berlawanan

Secara visual, urutan baris terlihat “terbalik” dibanding wrap.

justify-content

justify-content mengatur bagaimana item didistribusikan di sepanjang main axis.
Bukan hanya soal posisi kiri–kanan, tapi juga jarak antar item. Yang sering disalahpahami:

- justify-content tidak selalu horizontal
- Arah kerjanya selalu mengikuti main axis

Kalau main axis horizontal → efeknya ke kiri–kanan
Kalau main axis vertikal → efeknya ke atas–bawah

<body style="border: 5px solid red; padding-bottom: 800px;">

    <!-- main axis horizontal (row) -->
    <div style="display: flex;justify-content: space-between;border: 5px solid blue;padding: 10px;margin-bottom: 30px;">
        <div style="border:5px solid black;padding:3px">Element-1</div>
        <div style="border:5px solid black;padding:3px">Element-2</div>
        <div style="border:5px solid black;padding:3px">Element-3</div>
    </div>

    <!-- main axis vertikal (column) -->
    <div style="display: flex;flex-direction: column;justify-content: space-between;height: 200px;border: 5px solid lightgreen;padding: 10px;">
        <div style="border:5px solid black;padding:3px">Element-1</div>
        <div style="border:5px solid black;padding:3px">Element-2</div>
        <div style="border:5px solid black;padding:3px">Element-3</div>
    </div>

</body>

justify-content mengatur posisi dan distribusi item di sepanjang main axis.

- flex-start
  Item dirapatkan ke awal main axis.
- center
  Item dikumpulkan di tengah main axis.
- flex-end
  Item dirapatkan ke akhir main axis.
- space-between
  Item pertama di awal, item terakhir di akhir,
  jarak di antara item dibagi rata.
- space-around
  Setiap item memiliki jarak di kiri dan kanan, namun jarak ke tepi container tidak sama dengan jarak antar item.
- space-evenly
  Semua jarak benar-benar sama, baik antar item maupun ke tepi container.

align-items

align-items mengatur posisi item di cross axis. Berbeda dengan justify-content, properti ini bekerja per item, bukan per baris.

Default-nya adalah stretch, yang sering bikin bingung:

- Item terlihat “ketarik” memenuhi tinggi container
- Padahal itu adalah perilaku bawaan Flexbox

align-items sangat terasa efeknya saat:

- Container punya tinggi tertentu
- Item punya ukuran yang berbeda

<body style="border: 5px solid red; padding-bottom: 800px;">

    <!-- align-items: stretch (default) -->
    <div
        style="display: flex;align-items: stretch;height: 200px;border: 5px solid blue;padding: 10px;gap: 10px;margin-bottom: 30px;">
        <div style="border:5px solid black;padding:3px">Element-1</div>
        <div style="border:5px solid black;padding:3px;font-size:24px">Element-2</div>
        <div style="border:5px solid black;padding:3px">Element-3</div>
    </div>

    <!-- align-items: center -->
    <div
        style="display: flex;align-items: center;height: 200px;border: 5px solid lightgreen;padding: 10px;gap: 10px;">
        <div style="border:5px solid black;padding:3px">Element-1</div>
        <div style="border:5px solid black;padding:3px;font-size:24px">Element-2</div>
        <div style="border:5px solid black;padding:3px">Element-3</div>
    </div>

</body>

Pada container pertama, align-items menggunakan nilai default stretch. Akibatnya, setiap item ditarik memenuhi tinggi container, meskipun ukuran kontennya berbeda-beda. Efek ini sering dianggap “aneh”, padahal ini adalah perilaku bawaan Flexbox.

Pada container kedua, align-items diubah menjadi center. Sekarang setiap item diposisikan di tengah cross axis, dan ukuran item kembali mengikuti kontennya.

align-items selalu bekerja di cross axis dan berlaku ke setiap item, bukan ke baris seperti align-content.

Mengatur posisi setiap item di cross axis. Untuk Nilai-nilainya:

- stretch (default)
  Item ditarik mengisi ukuran cross axis container.
- flex-start
  Item menempel di awal cross axis.
- center
  Item berada di tengah cross axis.
- flex-end
  Item menempel di akhir cross axis.
- baseline
  Item disejajarkan berdasarkan garis dasar teks.

align-content

align-content sering disalahpahami sebagai versi lain dari align-items. Padahal targetnya bukan item, melainkan baris.

Properti ini baru punya efek jika:

Item membentuk lebih dari satu baris
flex-wrap: wrap aktif

Singkatnya:

align-items → posisi item
align-content → posisi kumpulan baris

<body style="border: 5px solid red; padding-bottom: 800px;">

    <!-- align-content: space-between -->
    <div style="display: flex;flex-wrap: wrap;align-content: space-between;height: 300px;width: 260px;border: 5px solid blue;padding: 10px;gap: 10px;">
        <div style="width:120px;border:5px solid black;padding:3px">Element-1</div>
        <div style="width:120px;border:5px solid black;padding:3px">Element-2</div>
        <div style="width:120px;border:5px solid black;padding:3px">Element-3</div>
        <div style="width:120px;border:5px solid black;padding:3px">Element-4</div>
    </div>

</body>

Pada contoh ini:

- flex-wrap: wrap membuat item membentuk lebih dari satu baris
- Container diberi tinggi (height), sehingga ada ruang kosong di cross axis
- align-content: space-between mengatur jarak antar baris, bukan posisi item

Yang terlihat:

- Baris pertama terdorong ke atas
- Baris terakhir terdorong ke bawah
- Jarak antar baris diatur oleh align-content

Jika hanya satu baris, properti ini tidak akan memberi efek apa pun. Untuk nilai-nilainya:

- stretch (default)
  Baris ditarik mengisi seluruh ruang cross axis.
- flex-start
  Semua baris dirapatkan ke awal cross axis.
- center
  Semua baris dikumpulkan di tengah cross axis.
- flex-end
  Semua baris dirapatkan ke akhir cross axis.
- space-between
  Baris pertama di awal, baris terakhir di akhir,
  jarak antar baris dibagi rata.
- space-around
  Setiap baris memiliki jarak di atas dan bawah,
  namun jarak ke tepi tidak sama.
- space-evenly
  Semua jarak antar baris dan ke tepi sama besar.

3.3 Properti pada flex item

flex-grow

<body style="border: 5px solid red; padding-bottom: 800px;">
    <div style="display: flex;border: 5px solid blue;padding: 10px;gap: 10px;">
        <div style="border:5px solid black;padding:5px; flex-grow: 1;">
            Element-1 (grow: 1)
        </div>
        <div style="border:5px solid black;padding:5px; flex-grow: 10;">
            Element-2 (grow: 10)
        </div>
        <div style="border:5px solid black;padding:5px; flex-grow: 1;">
            Element-3 (grow: 1)
        </div>
    </div>
</body>

flex-grow menentukan seberapa besar sebuah item boleh “tumbuh” Pertumbuhan ini terjadi saat masih ada sisa ruang di main axis

Element-1 → flex-grow: 1
Element-2 → flex-grow: 10
Element-3 → flex-grow: 1

karena nilai flex-grow adalah 1 : 10 : 1, maka sisa ruang dibagi dengan rasio tersebut, sehingga Element-2 mendapatkan porsi ruang kosong jauh lebih besar dibanding Element-1 dan Element-3. Rumus Sederhananya (porsi item = (flex-grow item / total flex-grow) × sisa ruang)

flex-shrink

<body style="border: 5px solid red; padding-bottom: 800px;">
    <div style="display: flex;width: 400px;border: 5px solid blue;padding: 10px;gap: 10px;">
        <div style="width:250px;border:5px solid black;padding:5px; flex-shrink: 1;">
            Element-1 (shrink: 1)
        </div>
        <div style="width:250px;border:5px solid black;padding:5px; flex-shrink: 6;">
            Element-2 (shrink: 5)
        </div>
        <div style="width:250px;border:5px solid black;padding:5px; flex-shrink: 1;">
            Element-3 (shrink: 1)
        </div>
    </div>
</body>

Pada contoh tersebut, total lebar item melebihi lebar container, sehingga terjadi kekurangan ruang dan Flexbox mengaktifkan flex-shrink. Nilai flex-shrink menentukan seberapa besar masing-masing item harus berkorban dengan menyusut ukurannya. Mekanisme pembagiannya sama seperti flex-grow, yaitu menggunakan rasio nilai antar item, tetapi arahnya kebalikan. Jika flex-grow membagi sisa ruang untuk ditambahkan ke item, maka flex-shrink membagi kekurangan ruang untuk dikurangkan dari item. Karena nilai flex-shrink adalah 1 : 6 : 1, Element-2 menyusut paling besar, sementara Element-1 dan Element-3 menyusut jauh lebih kecil.

flex-basis

<body style="border: 5px solid red; padding-bottom: 800px;">
    <div style="display: flex;border: 5px solid blue;padding: 10px;gap: 10px;">
        <div style="border:5px solid black;padding:5px; flex-basis: 100px;">
            Element-1 (basis: 100px)
        </div>
        <div style="border:5px solid black;padding:5px; flex-basis: 500px;">
            Element-2 (basis: 500px)
        </div>
        <div style="border:5px solid black;padding:5px; flex-basis: 150px;">
            Element-3 (basis: 150px)
        </div>
    </div>
</body>

flex-basis menentukan ukuran awal item di main axis dan akan mengalahkan width atau height pada axis tersebut. Main axis sendiri ditentukan oleh nilai flex-direction, sehingga flex-basis bisa berarti lebar atau tinggi tergantung arah layout. Nilai default flex-basis adalah auto, yang berarti ukuran awal item diambil dari width atau height jika properti tersebut ada, dan jika tidak, ukuran ditentukan berdasarkan ukuran konten.

align-self

<body style="border: 5px solid red; padding-bottom: 800px;">
    <div style="display: flex;align-items: center;height: 200px;border: 5px solid blue;padding: 10px;gap: 10px;">
        <div style="border:5px solid black;padding:5px;">
            Element-1
        </div>
        <div style="border:5px solid black;padding:5px; align-self: flex-start;">
            Element-2 (align-self: flex-start)
        </div>
        <div style="border:5px solid black;padding:5px;">
            Element-3
        </div>
    </div>
</body>

align-self digunakan untuk mengatur posisi satu item tertentu di cross axis, tanpa memengaruhi item lain. Properti ini menimpa nilai align-items milik container, sehingga satu item bisa memiliki posisi yang berbeda dari item lainnya.

Pada contoh di atas, container menggunakan align-items: center, sehingga semua item seharusnya berada di tengah cross axis. Namun, Element-2 diberi align-self: flex-start, sehingga posisinya berpindah ke awal cross axis, sementara item lain tetap berada di tengah. Untuk nilai-nilai nya:

- auto (default)
  Mengikuti nilai align-items pada container.
- stretch
  Item ditarik mengisi ukuran cross axis.
- flex-start
  Item menempel di awal cross axis.
- center
  Item berada di tengah cross axis.
- flex-end
  Item menempel di akhir cross axis.
- baseline
  Item disejajarkan berdasarkan garis dasar teks.

order

<body style="border: 5px solid red; padding-bottom: 800px;">
    <div
        style="display: flex;border: 5px solid blue;padding: 10px;gap: 10px;">
        <div style="border:5px solid black;padding:5px; order: 2;">
            Element-1 (order: 2)
        </div>
        <div style="border:5px solid black;padding:5px; order: 1;">
            Element-2 (order: 1)
        </div>
        <div style="border:5px solid black;padding:5px; order: 3;">
            Element-3 (order: 3)
        </div>
    </div>
</body>

order digunakan untuk mengatur urutan visual flex item, tanpa harus mengubah urutan elemen di HTML. Flexbox akan menyusun item berdasarkan nilai order dari yang paling kecil ke yang paling besar.

Pada contoh di atas, meskipun urutan HTML adalah Element-1, Element-2, lalu Element-3, secara visual Element-2 tampil lebih dulu, karena memiliki nilai order yang lebih kecil.

3.4 Studi kasus layout sederhana berbasis Flexbox

<body style="border:5px solid red;padding:10px;">
    <div style="display: flex;flex-wrap: wrap;gap: 10px;border: 5px solid blue;padding: 10px;">

        <div style="flex-grow: 1;flex-shrink: 1;flex-basis: 200px;border: 5px solid black;">
            <img src="https://picsum.photos/400/300?1" style="width:100%;display:block;">
        </div>
        <div style="flex-grow: 1;flex-shrink: 1;flex-basis: 200px;border: 5px solid black;">
            <img src="https://picsum.photos/400/300?2" style="width:100%;display:block;">
        </div>
        <div style="flex-grow: 1;flex-shrink: 1;flex-basis: 200px;border: 5px solid black;">
            <img src="https://picsum.photos/400/300?3" style="width:100%;display:block;">
        </div>
        <div style="flex-grow: 1;flex-shrink: 1;flex-basis: 200px;border: 5px solid black;">
            <img src="https://picsum.photos/400/300?4" style="width:100%;display:block;">
        </div>
        <div style="flex-grow: 1;flex-shrink: 1;flex-basis: 200px;border: 5px solid black;">
            <img src="https://picsum.photos/400/300?5" style="width:100%;display:block;">
        </div>

    </div>
</body>

Dari gambar di atas, dapat dilihat bahwa susunan layout berubah menyesuaikan ukuran layar. Album gambar tersebut disusun menggunakan Flexbox dengan tujuan menciptakan layout yang fleksibel dan responsif secara alami. Container album menggunakan display: flex dan flex-wrap: wrap, sehingga setiap gambar dapat turun ke baris berikutnya ketika ruang di main axis tidak lagi mencukupi. Setiap item gambar diberi flex-basis sebagai ukuran awal, lalu dikombinasikan dengan flex-grow dan flex-shrink agar gambar dapat membesar saat masih ada sisa ruang dan mengecil saat ruang menjadi terbatas, tanpa merusak struktur dan kerapian layout secara keseluruhan.

Ringkasannya:

display: flex → mengaktifkan Flexbox pada album
flex-wrap: wrap → memungkinkan album multi-baris
flex-basis → ukuran awal tiap gambar
flex-grow → gambar membesar mengisi sisa ruang
flex-shrink → gambar mengecil saat ruang tidak cukup

Contoh ini memperlihatkan bagaimana Flexbox cocok untuk album gambar satu dimensi yang perlu menyesuaikan diri dengan berbagai ukuran layar tanpa logika layout yang rumit.

4. CSS Grid

CSS Grid adalah sistem layout di CSS yang digunakan untuk menyusun elemen halaman web dalam bentuk baris dan kolom secara dua dimensi. Dengan CSS Grid, kita bisa mengatur struktur halaman—seperti header, sidebar, konten, dan footer—dengan lebih rapi, fleksibel, dan mudah dikontrol hanya melalui CSS, tanpa bergantung pada teknik lama seperti float atau position yang rumit. CSS Grid sangat cocok untuk membangun layout halaman yang kompleks dan responsif karena elemen bisa ditempatkan dan diatur ukurannya secara presisi sesuai kebutuhan desain.

4.1 Konsep dasar CSS Grid

CSS Grid bekerja dengan konsep tata letak dua dimensi, yaitu baris (rows) dan kolom (columns). Sebuah elemen dijadikan grid container untuk membentuk sistem grid, lalu elemen-elemen di dalamnya otomatis menjadi grid item yang akan ditempatkan ke dalam sel-sel grid. Pengembang dapat menentukan jumlah dan ukuran baris serta kolom, mengatur jarak antar sel, dan menempatkan setiap item pada posisi tertentu di dalam grid. Dengan konsep ini, layout halaman dapat dibangun secara terstruktur, konsisten, dan mudah diatur tanpa bergantung pada urutan elemen di HTML. Berikut ini kita contohkan langsung dengan studi kasus sederhana.

<body style="padding:10px;">
    <!-- GRID CONTAINER -->
    <div style="
        display:grid;
        grid-template-columns: 150px 1fr 1fr;   /* grid track (kolom) */
        grid-template-rows: 80px 200px 100px;  /* grid track (baris) */
        grid-template-areas:
            'header header header'
            'sidebar content content'
            'footer footer footer';            /* grid area */
        gap:25px;                              /* grid gap */
        border:5px solid blue;
        padding:30px;
    ">
        <!-- GRID ITEM -->
        <div style="grid-area: header;border:5px solid black;">
            Header
        </div>
        <!-- GRID ITEM -->
        <div style="grid-area: sidebar;border:5px solid black;">
            Sidebar
        </div>
        <!-- GRID ITEM -->
        <div style="grid-area: content;border:5px solid black;">
            Content
            <!-- Satu grid cell adalah satu kotak hasil perpotongan baris & kolom -->
        </div>
        <!-- GRID ITEM -->
        <div style="grid-area: footer;border:5px solid black;">
            Footer
        </div>
    </div>
</body>

Gambar di atas merupakan hasil dari kode yang menggunakan visual dari Grid Overlay pada DevTools. Visualisasi ini membantu kita melihat bagaimana struktur CSS Grid sebenarnya dibentuk oleh browser. Untuk dapat memahami CSS Grid dengan baik, langkah pertama yang perlu dilakukan adalah memahami konsep-konsep dasar yang membangun sistem grid itu sendiri. Berdasarkan contoh dan visualisasi di atas, berikut beberapa konsep penting dalam CSS Grid yang perlu dipahami terlebih dahulu:

Grid container

Grid container pada kasus ini adalah <div> terluar yang menggunakan display: grid. Elemen ini membentuk seluruh sistem grid yang terlihat pada overlay, ditandai dengan garis biru tebal. Semua baris, kolom, area, dan jarak antar elemen hanya bisa ada karena elemen ini menjadi grid container.

Grid item

Grid item adalah elemen yang berada langsung di dalam grid container, yaitu Header, Sidebar, Content, dan Footer. Masing-masing elemen ini tidak menentukan posisinya secara manual, tetapi ditempatkan oleh sistem grid melalui grid-template-areas dan grid-area.

Grid track

Grid track adalah satu baris atau satu kolom penuh. Pada kasus ini terdapat tiga kolom (150px, 1fr, 1fr) dan tiga baris (80px, 200px, 100px). Setiap track membentang sepanjang grid dan menentukan ukuran setiap cell yang berada di sepanjang baris atau kolom tersebut.

Grid line

Grid line adalah garis pembatas antar track yang terlihat pada overlay sebagai garis ungu putus-putus bernomor. Grid line menjadi acuan awal dan akhir sebuah track, serta dasar penentuan posisi grid item di dalam grid.

Grid cell

Grid cell adalah unit terkecil hasil perpotongan satu baris dan satu kolom. Pada layout ini, setiap kombinasi baris dan kolom membentuk satu cell. Grid item seperti header, content, dan footer sebenarnya menempati beberapa grid cell sekaligus, bukan hanya satu cell.

Grid area

Grid area merupakan gabungan beberapa grid cell yang diberi nama. Pada contoh ini, area header, sidebar, content, dan footer didefinisikan melalui grid-template-areas. Grid area memudahkan penempatan elemen tanpa harus menghitung nomor grid line secara manual.

Grid gap

Grid gap adalah jarak antar baris dan kolom yang diatur melalui properti gap. Pada overlay, grid gap terlihat sebagai area berarsir ungu di antara track. Grid gap bukan bagian dari grid item, melainkan ruang kosong yang disediakan oleh sistem grid itu sendiri.

4.2 Properti utama pada grid container

display: grid

Properti display: grid digunakan untuk menjadikan sebuah elemen sebagai grid container. Ketika properti ini diterapkan, browser akan mengaktifkan sistem CSS Grid pada elemen tersebut, dan seluruh elemen langsung di dalamnya otomatis menjadi grid item. Sejak titik ini, tata letak elemen tidak lagi mengikuti alur normal dokumen, melainkan diatur berdasarkan baris dan kolom yang ditentukan oleh sistem grid.

<body style="border:5px solid red;padding:10px;">
    <div style="
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap:10px;
        border:5px solid blue;
        padding:10px;
    ">
        <div style="border:5px solid black;">
            Item-1
        </div>
        <div style="border:5px solid black;">
            Item-2
        </div>
        <div style="border:5px solid black;">
            Item-3
        </div>
        <div style="border:5px solid black;">
            Item-4
        </div>
        <div style="border:5px solid black;">
            Item-5
        </div>
    </div>
</body>

grid-template-columns

Properti grid-template-columns digunakan untuk menentukan jumlah kolom dan ukuran setiap kolom di dalam grid container. Dengan properti ini, kita bisa mengatur apakah kolom memiliki ukuran tetap (misalnya px), fleksibel (fr), atau menyesuaikan lebar container secara otomatis. Setiap nilai yang ditulis merepresentasikan satu vertical grid track (kolom).

<body style="padding:10px;">
    <div style="
        display:grid;
        grid-template-columns: 200px 1fr 1fr;
        gap:10px;
        border:5px solid blue;
        padding:10px;
    ">
        <div style="border:5px solid black;">Item-1</div>
        <div style="border:5px solid black;">Item-2</div>
        <div style="border:5px solid black;">Item-3</div>
        <div style="border:5px solid black;">Item-4</div>
        <div style="border:5px solid black;">Item-5</div>
    </div>
</body>

grid-template-rows

Properti grid-template-rows digunakan untuk menentukan jumlah baris dan tinggi setiap baris di dalam grid container. Setiap nilai yang dituliskan merepresentasikan satu horizontal grid track (baris). Dengan properti ini, tinggi grid item tidak lagi mengikuti tinggi konten semata, tetapi mengikuti tinggi baris yang sudah didefinisikan oleh sistem grid.

<body style="padding:10px;">
    <div style="
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 80px 200px 100px;
        gap:10px;
        border:5px solid blue;
        padding:10px;
    ">

        <div style="border:5px solid black;">Item-1</div>
        <div style="border:5px solid black;">Item-2</div>
        <div style="border:5px solid black;">Item-3</div>
        <div style="border:5px solid black;">Item-4</div>
        <div style="border:5px solid black;">Item-5</div>
        <div style="border:5px solid black;">Item-6</div>

    </div>
</body>

gap

Properti gap digunakan untuk mengatur jarak antar baris dan kolom di dalam grid container. Jarak yang dihasilkan oleh gap berada di antara grid track, bukan sebagai margin milik grid item. Dengan demikian, jarak antar elemen menjadi konsisten tanpa perlu mengatur margin pada masing-masing item.
gap menentukan jarak antar grid item pada layout grid.)

<body style="padding:10px;">
    <div style="
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        gap:50px;
        border:5px solid blue;
        padding:10px;
    ">
        <div style="border:5px solid black;">Item-1</div>
        <div style="border:5px solid black;">Item-2</div>
        <div style="border:5px solid black;">Item-3</div>
        <div style="border:5px solid black;">Item-4</div>
        <div style="border:5px solid black;">Item-5</div>
        <div style="border:5px solid black;">Item-6</div>
    </div>
</body>

grid-template-areas

Properti grid-template-areas digunakan untuk mendefinisikan tata letak grid menggunakan nama area. Dengan properti ini, kita dapat menyusun layout secara visual dan deklaratif dengan memberi nama pada kumpulan grid cell, lalu menempatkan grid item ke area tersebut. Pendekatan ini membuat struktur layout lebih mudah dibaca dan dipahami dibandingkan harus menghitung nomor grid line secara manual.

<body style="padding:10px;">
    <div style="
        display:grid;
        grid-template-columns: 150px 1fr 1fr;
        grid-template-rows: 80px 200px 100px;
        grid-template-areas:
            'header header header'
            'sidebar content content'
            'footer footer footer';
        gap:15px;
        border:5px solid blue;
        padding:10px;
    ">
        <div style="grid-area: header;border:5px solid black;">
            Header
        </div>
        <div style="grid-area: sidebar;border:5px solid black;">
            Sidebar
        </div>
        <div style="grid-area: content;border:5px solid black;">
            Content
        </div>
        <div style="grid-area: footer;border:5px solid black;">
            Footer
        </div>
    </div>
</body>

Setiap baris teks pada grid-template-areas merepresentasikan satu baris grid. Sebuah grid area dapat mencakup lebih dari satu baris grid apabila nama area yang sama diulang pada beberapa baris. Nama area yang sama dalam satu baris menunjukkan bahwa area tersebut melebar ke beberapa kolom. Properti grid-area pada grid item digunakan untuk menghubungkan elemen dengan area yang telah didefinisikan, sehingga grid item akan ditempatkan sesuai nama area tanpa bergantung pada urutan elemen di HTML.

4.3 Properti utama pada grid item

grid-column

Properti grid-column digunakan untuk menentukan posisi horizontal sebuah grid item di dalam grid, yaitu di kolom mana item dimulai dan di kolom mana item berakhir. Penempatan ini didasarkan pada grid line, bukan pada ukuran konten atau urutan elemen di HTML. Dengan grid-column, satu grid item dapat menempati satu kolom saja atau membentang ke beberapa kolom sekaligus.

<body style="padding:10px;">
    <div style="
        display:grid;
        grid-template-columns: 150px 1fr 1fr;
        grid-template-rows: 80px 200px;
        gap:15px;
        border:5px solid blue;
        padding:10px;
    ">
        <div style="grid-column: 1 / 4;border:5px solid black;">
            Header (kolom 1 sampai 3)
        </div>
        <div style="grid-column: 1 / 2;border:5px solid black;">
            Sidebar
        </div>
        <div style="grid-column: 2 / 4;border:5px solid black;">
            Content
        </div>
    </div>
</body>

grid-row

Properti grid-row digunakan untuk menentukan posisi vertikal sebuah grid item di dalam grid, yaitu di baris mana item dimulai dan di baris mana item berakhir. Seperti grid-column, properti ini bekerja berdasarkan grid line, bukan berdasarkan tinggi konten atau urutan elemen di HTML. Dengan grid-row, sebuah grid item dapat menempati satu baris saja atau membentang ke beberapa baris sekaligus.

<body style="padding:10px;">
    <div style="
        display:grid;
        grid-template-columns: 150px 1fr 1fr;
        grid-template-rows: 80px 200px 100px;
        gap:15px;
        border:5px solid blue;
        padding:10px;
    ">
        <div style="grid-row: 1 / 2;grid-column: 1 / 4;border:5px solid black;">
            Header
        </div>
        <div style="grid-row: 2 / 3;grid-column: 1 / 2;border:5px solid black;">
            Sidebar
        </div>
        <div style="grid-row: 2 / 3;grid-column: 2 / 4;border:5px solid black;">
            Content
        </div>
        <div style="grid-row: 3 / 4;grid-column: 1 / 4;border:5px solid black;">
            Footer
        </div>
    </div>
</body>

grid-area

Properti grid-area digunakan untuk menempatkan grid item ke dalam area tertentu pada grid. Properti ini biasanya dipakai bersama grid-template-areas yang didefinisikan pada grid container, sehingga penempatan elemen dapat dilakukan menggunakan nama area, bukan nomor grid line. Dengan grid-area, struktur layout menjadi lebih mudah dibaca dan dipahami.

<body style="padding:10px;">
    <div style="
        display:grid;
        grid-template-columns: 150px 1fr 1fr;
        grid-template-rows: 80px 200px 100px;
        grid-template-areas:
            'header header header'
            'sidebar content content'
            'footer footer footer';
        gap:15px;
        border:5px solid blue;
        padding:10px;
    ">
        <div style="grid-area: header;border:5px solid black;">
            Header
        </div>
        <div style="grid-area: sidebar;border:5px solid black;">
            Sidebar
        </div>
        <div style="grid-area: content;border:5px solid black;">
            Content
        </div>
        <div style="grid-area: footer;border:5px solid black;">
            Footer
        </div>
    </div>
</body>

5. Float

Secara historis, CSS float awalnya digunakan untuk membantu pembuatan tata letak, seperti membuat kolom berdampingan atau membuat teks mengalir di samping gambar. Namun, dalam praktik pengembangan web modern, penggunaan float untuk layout menjadi semakin terbatas karena teknik layout seperti Flexbox dan CSS Grid menawarkan kontrol yang lebih fleksibel dan terstruktur untuk desain yang kompleks.

5.1 Konsep dasar `float`

Properti float dalam CSS digunakan untuk membuat sebuah elemen mengambang ke sisi kiri atau kanan dari kontainernya. Ketika sebuah elemen di-float, elemen tersebut diangkat dari alur normal dokumen, sehingga konten lain seperti teks atau elemen inline akan mengalir di sekitarnya. Nilai yang umum digunakan pada properti float adalah left, right, dan none, di mana none merupakan nilai default yang membuat elemen tetap berada dalam alur normal.

5.2 Perilaku elemen saat menggunakan float

Ketika sebuah elemen diberikan properti float, elemen tersebut akan keluar dari alur normal dokumen dan diposisikan ke sisi kiri atau kanan dari kontainernya. Akibatnya, elemen blok lain yang berada setelahnya dapat bergeser naik dan menempati ruang yang tersedia di sekitar elemen yang di-float.

Konten seperti teks atau elemen inline akan mengalir mengelilingi elemen float, bukan berada di bawahnya. Perilaku ini membuat float awalnya sangat cocok untuk kasus seperti gambar dengan teks di sampingnya. Namun, karena elemen float tidak lagi memengaruhi tinggi kontainer induknya, tata letak dapat menjadi sulit dikendalikan jika digunakan tanpa penanganan tambahan.

Selain itu, beberapa elemen float yang ditempatkan berurutan akan berjejer secara horizontal selama masih tersedia ruang dalam satu baris. Jika ruang tidak mencukupi, elemen berikutnya akan turun ke baris berikutnya, menyerupai perilaku wrapping, meskipun mekanismenya berbeda dengan Flexbox atau Grid.

<body style="padding:10px;">
    <div style="border:5px solid blue;padding:10px;">
        <div style="
            float:left;
            width:100px;
            height:60px;
            border:5px solid black;
            background:#ddd;
            margin-right:10px;
        ">
            Float Left
        </div>
        <div style="
            float:left;
            width:100px;
            height:60px;
            border:5px solid black;
            background:#ddd;
            margin-right:10px;
        ">
            Float Left 2
        </div>
        <p style="border:5px solid gray;">
            Paragraf ini akan mengalir di samping elemen yang di-float.
            Karena elemen di atas menggunakan <code>float:left</code>,
            teks tidak berada di bawahnya, tetapi mengisi ruang di
            sisi kanan elemen float tersebut.
        </p>
    </div>
</body>

5.3 Masalah umum float (collapse, overlap)

Collapse (Kontainer runtuh)

Masalah collapse terjadi ketika sebuah kontainer hanya berisi elemen-elemen yang di-float. Karena elemen float tidak dihitung sebagai bagian dari alur normal, kontainer induknya seolah-olah tidak memiliki tinggi, meskipun elemen di dalamnya terlihat secara visual. Hal ini menyebabkan border atau background kontainer tidak membungkus isi float dengan benar.

<body style="padding:10px;">
    <div style="
        border:5px solid blue;
        padding:10px;
    ">
        <div style="
            float:left;
            width:200px;
            height:120px;
            border:5px solid black;
            background:#ddd;
        ">
            Float Box
        </div>
    </div>
    <p style="border:5px solid red;">
        Paragraf di luar kontainer
    </p>
</body>

Overlap (Tumpang tindih elemen)

Masalah overlap terjadi ketika elemen setelah float tidak diberi penanganan khusus. Karena float “mengambang”, elemen berikutnya dapat naik dan menumpuk atau berada di samping float, padahal secara visual diharapkan berada di bawahnya. Overlap sering muncul ketika layout kompleks dibuat hanya dengan float tanpa teknik clear.

<body style="padding:10px;">

    <div style="
        float:left;
        width:200px;
        height:120px;
        border:5px solid black;
        background:#ddd;
        margin-right:10px;
    ">
        Float Box
    </div>
    <div style="border:5px solid red;height:100px;">
        Elemen ini seharusnya di bawah,
        tapi justru naik ke samping float
    </div>

</body>

5.4 Teknik clear float (`clear`, clearfix)

Masalah collapse dan overlap yang muncul saat menggunakan float bukanlah bug, melainkan konsekuensi dari perilaku float yang keluar dari alur normal dokumen. Untuk mengatasinya, CSS menyediakan dua pendekatan umum, yaitu menggunakan properti clear dan teknik clearfix.

Menggunakan Clear

Properti clear digunakan pada elemen setelah float untuk menghentikan efek float dan memaksa elemen tersebut tampil di bawah elemen yang di-float. Dengan clear, alur dokumen dikembalikan secara manual.

Nilai yang umum digunakan:

clear: left → membersihkan float kiri
clear: right → membersihkan float kanan
clear: both → membersihkan float di kedua sisi

Contoh perbaikan dengan clear

<body style="padding:10px;">

    <div style="
        float:left;
        width:200px;
        height:120px;
        border:5px solid black;
        background:#ddd;
        margin-right:10px;
    ">
        Float Box
    </div>

    <div style="clear:both;border:5px solid red;padding:10px;">
        Elemen ini sekarang berada di bawah float
    </div>

</body>

Penjelasan singkat:

clear: both memaksa elemen merah turun ke bawah
Masalah overlap berhasil diatasi
Namun, clear harus ditambahkan secara manual pada elemen tertentu

Menggunakan Clearfix

Masalah collapse terjadi karena kontainer tidak menghitung tinggi elemen float di dalamnya. Teknik clearfix digunakan untuk membuat kontainer kembali membungkus elemen float tanpa perlu menambahkan elemen kosong atau clear secara manual.

Clearfix bekerja dengan menambahkan elemen virtual setelah konten float menggunakan pseudo-element.

<body style="padding:10px;">

    <style>
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>

    <div class="clearfix" style="border:5px solid blue;padding:10px;">
        <div style="float:left;width:200px;height:120px;border:5px solid black;background:#ddd;">
            Float Box
        </div>
    </div>

</body>

5.5 Studi kasus layout lama berbasis float

Pada era sebelum Flexbox dan CSS Grid, layout halaman web umumnya dibangun menggunakan kombinasi float, width, dan clearfix. Studi kasus berikut menggambarkan struktur halaman klasik yang sering digunakan: header, sidebar kiri, konten utama, sidebar kanan, dan footer.

<body style="padding:10px;">

    <style>
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>

    <!-- HEADER -->
    <div style="
        border:5px solid black;
        padding:15px;
        margin-bottom:10px;
    ">
        Header
    </div>

    <!-- MAIN LAYOUT -->
    <div class="clearfix" style="
        border:5px solid blue;
        padding:10px;
    ">

        <!-- SIDEBAR LEFT -->
        <div style="
            float:left;
            width:20%;
            border:5px solid black;
            padding:10px;
            box-sizing:border-box;
        ">
            Sidebar Left
        </div>

        <!-- CONTENT -->
        <div style="
            float:left;
            width:60%;
            border:5px solid black;
            padding:10px;
            box-sizing:border-box;
        ">
            Main Content<br><br>
            Area konten utama yang biasanya berisi artikel,
            tabel, atau komponen lain dengan tinggi dinamis.
        </div>

        <!-- SIDEBAR RIGHT -->
        <div style="
            float:left;
            width:20%;
            border:5px solid black;
            padding:10px;
            box-sizing:border-box;
        ">
            Sidebar Right
        </div>

    </div>

    <!-- FOOTER -->
    <div style="
        border:5px solid black;
        padding:15px;
        margin-top:10px;
    ">
        Footer
    </div>

</body>

Penjelasan Studi Kasus

Layout dibangun sepenuhnya menggunakan float:left
Lebar kolom harus dihitung manual (20% + 60% + 20%)
Urutan HTML sangat menentukan posisi visual
Kontainer utama membutuhkan clearfix agar tidak runtuh (collapse)
Perubahan kecil (misalnya padding atau border) dapat dengan mudah merusak layout jika perhitungan lebar tidak tepat

Masalah yang Terlihat pada Pendekatan Ini

Layout sangat bergantung pada perhitungan lebar
Sulit untuk diubah menjadi responsif tanpa media query tambahan
Struktur layout tidak deklaratif (tidak terlihat jelas dari CSS saja)
Membutuhkan teknik tambahan seperti clearfix hanya agar layout stabil

Studi kasus ini menunjukkan bahwa meskipun layout berbasis float dapat digunakan untuk membangun halaman yang cukup kompleks, pendekatan ini memiliki banyak keterbatasan dan mudah menimbulkan masalah. Inilah alasan utama mengapa float tidak lagi direkomendasikan untuk layout modern, dan digantikan oleh Flexbox serta CSS Grid yang memang dirancang khusus untuk kebutuhan tata letak.

Ini udah cukup panjang pembahasannya mungkin, sekian dan terima gaji:v