Layouting dengan CSS

Membuat layout yang baik adalah salah satu keterampilan paling penting dalam pengembangan web modern.

Display Property

Properti display menentukan bagaimana sebuah elemen ditampilkan:

Nilai	Deskripsi	Contoh
`block`	Elemen mengambil lebar penuh dan dimulai pada baris baru	`div, p, h1-h6, section`
`inline`	Elemen hanya mengambil lebar yang diperlukan dan tidak memulai baris baru	`span, a, strong, em`
`inline-block`	Gabungan inline dan block - tidak memulai baris baru tetapi bisa diatur width/height	`button, input, select`
`none`	Elemen tidak ditampilkan sama sekali	-
`flex`	Elemen menjadi flex container (CSS Flexbox)	-
`grid`	Elemen menjadi grid container (CSS Grid)	-

.block-example {
    display: block;
    width: 200px;
    height: 100px;
    background: lightblue;
    margin: 10px;
}

.inline-example {
    display: inline;
    width: 200px; /* Tidak berpengaruh */
    height: 100px; /* Tidak berpengaruh */
    background: lightcoral;
    margin: 10px; /* Hanya margin horizontal yang berpengaruh */
}

.inline-block-example {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: lightgreen;
    margin: 10px;
}

Box Model

Setiap elemen HTML adalah sebuah box yang terdiri dari:

Content - Isi elemen (ditentukan oleh width/height)
Padding - Ruang antara content dan border
Border - Garis tepi box
Margin - Ruang di luar border

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 30px;
    background-color: lightblue;
}

Margin

Border

Padding

Content

Box-sizing

Properti box-sizing mengatur bagaimana width dan height dihitung:

content-box (default) - width/height hanya menghitung content
border-box - width/height menghitung content + padding + border

.content-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Total width = 200 + 20*2 + 5*2 = 250px */
}

.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Total width = 200px (content = 200 - 20*2 - 5*2 = 150px) */
}

Best Practice: Selalu gunakan box-sizing: border-box untuk semua elemen dengan CSS reset:

*, *::before, *::after {
    box-sizing: border-box;
}

Positioning

Properti position menentukan bagaimana elemen diposisikan:

Nilai	Deskripsi	Contoh
`static`	Default. Elemen mengikuti alur dokumen normal	-
`relative`	Elemen diposisikan relatif terhadap posisi normalnya	`top, right, bottom, left`
`absolute`	Elemen diposisikan relatif terhadap ancestor terdekat yang diposisikan (bukan static)	`top, right, bottom, left`
`fixed`	Elemen diposisikan relatif terhadap viewport	`top, right, bottom, left`
`sticky`	Gabungan relative dan fixed - menjadi fixed saat scroll mencapai posisi tertentu	`top, right, bottom, left`

.relative-box {
    position: relative;
    top: 20px;
    left: 30px;
    background: lightblue;
}

.absolute-box {
    position: absolute;
    top: 50px;
    right: 0;
    background: lightcoral;
}

.fixed-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: lightgreen;
}

.sticky-box {
    position: sticky;
    top: 0;
    background: lightyellow;
}

Flexbox

CSS Flexible Box Layout (Flexbox) adalah model layout satu dimensi untuk mengatur item dalam satu baris atau kolom.

Flex Container

.flex-container {
    display: flex;
    flex-direction: row; /* row (default), row-reverse, column, column-reverse */
    flex-wrap: nowrap; /* nowrap (default), wrap, wrap-reverse */
    justify-content: flex-start; /* flex-start (default), flex-end, center, space-between, space-around, space-evenly */
    align-items: stretch; /* stretch (default), flex-start, flex-end, center, baseline */
    align-content: stretch; /* stretch (default), flex-start, flex-end, center, space-between, space-around */
    gap: 10px; /* Jarak antar item */
}

Flex Items

.flex-item {
    order: 0; /* Urutan item (default 0) */
    flex-grow: 0; /* Kemampuan item untuk tumbuh (default 0) */
    flex-shrink: 1; /* Kemampuan item untuk menyusut (default 1) */
    flex-basis: auto; /* Ukuran awal item (default auto) */
    align-self: auto; /* Override align-items untuk item tertentu */
}

Tip: Gunakan shorthand flex: grow shrink basis:

.flex-item {
    flex: 1 1 200px; /* grow=1, shrink=1, basis=200px */
}

CSS Grid

CSS Grid Layout adalah sistem layout dua dimensi yang memungkinkan pengaturan kolom dan baris.

Grid Container

.grid-container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr; /* 3 kolom */
    grid-template-rows: 100px auto; /* 2 baris */
    gap: 10px; /* Jarak antar cell */
    justify-items: stretch; /* Penyelarasan horizontal item */
    align-items: stretch; /* Penyelarasan vertikal item */
    justify-content: start; /* Penyelarasan grid secara horizontal */
    align-content: start; /* Penyelarasan grid secara vertikal */
}

Grid Items

.grid-item {
    grid-column-start: 1;
    grid-column-end: 3; /* Item akan menempati kolom 1 dan 2 */
    grid-row-start: 1;
    grid-row-end: 2; /* Item akan menempati baris 1 */
    justify-self: stretch; /* Override justify-items untuk item ini */
    align-self: stretch; /* Override align-items untuk item ini */
}

Tip: Gunakan shorthand grid-area untuk menentukan grid-column dan grid-row:

.grid-item {
    grid-area: 1 / 1 / 2 / 3; /* row-start / column-start / row-end / column-end */
}

Praktik Mandiri

Coba buat layout dengan Flexbox atau Grid:

/* Pilih salah satu metode layout */
.container {
    /* Flexbox */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    
    /* Atau Grid */
    /* display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; */
}

.item {
    background: lightblue;
    padding: 20px;
    text-align: center;
    
    /* Untuk Flexbox */
    flex: 1 1 200px;
    
    /* Untuk Grid */
    /* min-height: 100px; */
}

.header, .footer {
    flex-basis: 100%;
    /* Atau untuk Grid: grid-column: 1 / -1; */
    background: lightcoral;
}

.sidebar {
    /* Untuk Flexbox */
    flex: 0 0 250px;
    
    /* Untuk Grid */
    /* grid-row: 2 / 4; */
    background: lightgreen;
}

.main-content {
    /* Untuk Flexbox */
    flex: 1;
    
    /* Untuk Grid */
    /* grid-column: 2 / -1; */
    background: lightyellow;
}

Hasil:

Main Content

Item 1

Item 2

Item 3