CSS Layout & Positioning

📌 Elements

💡 Fundamental Properties

CSS Layout & Positioning mengontrol bagaimana elemen ditempatkan dan diatur pada halaman web. Memahami ini penting untuk membuat desain yang responsif.

layout.css

          
            /* Display Properties */

            .box {

              display: block; /* or inline, inline-block, none */

              visibility: visible; /* or hidden */

            }

            /* Box Model */

            .element {

              width: 300px;

              height: 200px;

              padding: 20px;

              border: 2px solid #9333ea;

              margin: 10px;

              box-sizing: border-box; /* or content-box */

            }

            /* Positioning */

            .absolute-box {

              position: absolute; /* or relative, fixed, sticky */

              top: 20px;

              left: 30px;

              z-index: 10;

            }

📝 Penjelasan Detail:

• display - menentukan bagaimana elemen ditampilkan
• box-model - mengatur dimensi dan spasi (width, height, padding, margin)
• position - mengontrol posisi elemen (static, relative, absolute, fixed, sticky)
• z-index - mengatur tumpukan elemen (hanya bekerja dengan position non-static)
• box-sizing - mengontrol perhitungan dimensi (border-box lebih intuitif)

🛠️ Features

layout-features.css

          
            /* Flexbox Layout */

            .flex-container {

              display: flex;

              flex-direction: row; /* or column */

              justify-content: center; /* main axis */

              align-items: center; /* cross axis */

              gap: 1rem;

            }

            /* CSS Grid Layout */

            .grid-container {

              display: grid;

              grid-template-columns: 1fr 2fr 1fr;

              grid-template-rows: auto 1fr auto;

              grid-gap: 20px;

            }

            /* Multi-column Layout */

            .multi-column {

              column-count: 3;

              column-gap: 2rem;

              column-rule: 1px solid #9333ea;

            }

ℹ️ Browser Support

Flexbox: Chrome 29+, Firefox 28+, Safari 9+, IE 11+. CSS Grid: Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+. Multi-column: Chrome 1+, Firefox 1.5+, Safari 3+, IE 10+.

📊 Basic Tables

layout-values.css

          
            /* Position Values */

            static   /* Default */

            relative /* Relative to normal position */

            absolute /* Relative to nearest positioned ancestor */

            fixed    /* Relative to viewport */

            sticky  /* Hybrid of relative and fixed */

            /* Display Values */

            block      /* Takes full width */

            inline     /* Flows like text */

            inline-block /* Inline with block properties */

            flex       /* Flex container */

            grid       /* Grid container */

            none      /* Removes from flow */

            /* Float Values */

            left    /* Floats element left */

            right  /* Floats element right */

            none   /* Default (no float) */

            inherit /* Inherits from parent */

📝 Penjelasan Detail:

• Position values mengontrol jenis positioning yang digunakan
• Display values menentukan konteks layout untuk elemen
• Flexbox ideal untuk 1D layouts (baris atau kolom)
• Grid dirancang untuk 2D layouts (baris dan kolom)
• Float masih berguna untuk wrapping text di sekitar gambar

🚀 Advanced Table

advanced-layout.css

          
            /* Advanced Grid */

            .responsive-grid {

              display: grid;

              grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

              grid-auto-rows: minmax(100px, auto);

              grid-template-areas: "header header" "sidebar main" "footer footer";

            }

            /* Flexbox Alignment */

            .flex-alignment {

              display: flex;

              align-content: space-between; /* multi-line */

              align-self: flex-end; /* individual items */

              order: 2; /* change visual order */

            }

            /* CSS Shapes */

            .text-wrap {

              shape-outside: circle(50%);

              float: left;

              width: 200px;

              height: 200px;

              clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0 75%);

            }

ℹ️ Browser Support

Advanced Grid: Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+. Flexbox alignment: Chrome 29+, Firefox 28+, Safari 9+, IE 11+. CSS Shapes: Chrome 37+, Firefox 62+, Safari 10.1+, Edge 79+.

💡 Pro Tips

🎯 Best Practices

Gunakan Flexbox untuk komponen kecil dan Grid untuk layout halaman. Hindari float untuk layout utama. Manfaatkan CSS variables untuk konsistensi spacing.

layout-tips.css

          
            /* ✅ Good - Modern layout techniques */

            .responsive-card {

              display: grid;

              grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

              gap: 1.5rem;

            }

            /* ✅ Good - Consistent spacing */

            :root {

              --spacing-unit: 1rem;

            }

            .container {

              padding: calc(var(--spacing-unit) * 2);

            }

            /* ❌ Avoid - Old float layouts */

            .old-layout {

              float: left;

              width: 30%;

              margin-right: 3%;

              clear: both;

            }

            /* ❌ Avoid - Overuse of position absolute */

            .over-absolute {

              position: absolute;

              top: 0;

              left: 0;

              right: 0;

              bottom: 0;

            }

📝 Penjelasan Detail:

• Mobile-first - mulai dari layout mobile lalu enhance untuk desktop
• CSS Grid untuk layout utama halaman
• Flexbox untuk komponen dan alignment
• Gap property lebih baik dari margin untuk spasi konsisten
• CSS Variables untuk nilai spacing yang konsisten
• Minimal position absolute - gunakan hanya ketika benar-benar perlu