CSS #2: Layout & Posisi

Mengatur layout dan posisi elemen di halaman web adalah aspek penting dalam desain web. Dengan memahami berbagai teknik CSS, kalian bisa menciptakan tata letak yang rapi dan fungsional. Berikut ini adalah dasar-dasar mengenai layout dan posisi dalam CSS.

Model Kotak CSS (Box Model)

CSS Box Model adalah konsep fundamental dalam CSS yang menggambarkan bagaimana elemen HTML diperlakukan sebagai kotak yang terdiri dari beberapa lapisan.

Padding, Margin, Border, Content

1. Content:

• Area tempat teks dan gambar berada. Ini adalah inti dari elemen.

2. Padding:

• Ruang antara content dan border. Padding memberikan ruang di dalam border elemen.

3. Border:

• Garis yang mengelilingi padding dan content. Border bisa memiliki ketebalan, warna, dan gaya yang berbeda.

4. Margin:

• Ruang di luar border yang memisahkan elemen dari elemen lainnya. Margin tidak memiliki warna dan transparan.

Contoh CSS untuk Box Model:

div {
 width: 200px;
 padding: 10px;
 border: 2px solid black;
 margin: 20px;
}

Sumber: MDN Web Docs - Box Model

Positioning

CSS menyediakan berbagai metode untuk mengatur posisi elemen pada halaman web. Berikut adalah beberapa metode positioning yang sering digunakan.

Static, Relative, Absolute, Fixed, Sticky

1. Static:

• Posisi default elemen. Elemen ditempatkan sesuai dengan alur dokumen normal.

2. Relative:

• Posisi elemen relatif terhadap posisi defaultnya. Kalian bisa menggunakan properti top, right, bottom, dan left untuk menggeser elemen.

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

3. Absolute:

• Posisi elemen relatif terhadap elemen induknya yang paling dekat dengan posisi relative, absolute, atau fixed. Jika tidak ada, relatif terhadap dokumen.

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

4. Fixed:

• Posisi elemen tetap relatif terhadap viewport (layar), bahkan saat halaman di-scroll.

.fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

5. Sticky:

• Posisi elemen berubah dari relative menjadi fixed ketika mencapai scroll tertentu.

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

Sumber: MDN Web Docs - Positioning

Flexbox

Flexbox adalah sistem layout CSS yang didesain untuk mengatur elemen dalam satu dimensi (baris atau kolom) dengan efisien.

Dasar-dasar Flexbox

1. Container Flex:

• Elemen induk yang mengatur anak-anaknya dengan display: flex.

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

2. Item Flex:

• Elemen anak yang ditempatkan di dalam container flex.

.flex-item {
  flex: 1;
  padding: 10px;
}

Contoh Penerapan Flexbox

Contoh sederhana layout Flexbox:

<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>

Dengan CSS:

.flex-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.flex-item {
 flex: 1;
 padding: 10px;
 border: 1px solid #000;
}

Sumber: CSS-Tricks - A Complete Guide to Flexbox

Grid Layout

CSS Grid adalah sistem layout dua dimensi yang memungkinkan kalian untuk mengatur elemen dalam baris dan kolom.

Dasar-dasar CSS Grid

1. Container Grid:

• Elemen induk yang mengatur anak-anaknya dengan display: grid.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
 }

2. Item Grid:

• Elemen anak yang ditempatkan di dalam container grid.

.grid-item {
  padding: 20px;
  border: 1px solid #000;
}

Contoh Penerapan CSS Grid

Contoh sederhana layout Grid:

<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>

Dengan CSS:

.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 10px;
}
.grid-item {
 padding: 20px;
 border: 1px solid #000;
}

Sumber: MDN Web Docs - CSS Grid Layout

Dengan memahami dasar-dasar CSS Box Model, positioning, Flexbox, dan Grid Layout, kalian akan memiliki alat yang kuat untuk mengatur layout dan posisi elemen di halaman web kalian dengan efisien dan estetis.