Full Bleed Layout

Kadang kala kita menjumpai sebuah blog dan menjumpai sebuah gambar yang lebarnya mencapai tepi halaman. Ini dinamakan Full Bleed.

Istilah full bleed sendiri berasal dari dunia publishing atau desain cetak, yang berarti suatu elemen mencapai tepian secara penuh.

Teknik ini sangat cocok bagi kalian yang mempunyai blog, artikel, dokumentasi maupun web yang lain yang mempunyai layout centered, seperti artikel yang saat ini kalian baca.

Teknik full bleed memungkinkan kita untuk menempatkan elemen atau gambar tertentu pada website kita, sehingga melebihi batas lebar halaman tanpa adanya margin atau padding yang terlihat. Dengan menggunakan teknik ini, kita dapat menciptakan tampilan yang elegan dan modern pada website kita.

Cara Membuat

Ada banyak sekali teknik yang dapat kita gunakan untuk mendapatkan hasil serupa. berikut beberapa diantarannya:

CSS Grid

Josh menulis artikel mengenai bagaimana dia menerapkan Full Bleed dengan mengguanakan CSS Grid.

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}
.wrapper > * {
  grid-column: 2;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

Kolom pertama dan terakhir memiliki lebar 1fr. Unit fr adalah unit fleksibel yang mengisi ruang yang ada, mirip seperti flex-grow. Kolom tengah memiliki lebar tetap. Pada kode diatas kita menggunakan fungsi min untuk memilih nilai yang mana yang lebih kecil antara 65ch atau 100% menyesuaikan dengan lebar kontainer.

Viewport Width

Adapun cara lain yaitu dengan menggunakan custom class khusus seperti contoh dibawah ini

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

Elemen akan diatur lebarnya menjadi 100vw, yang berarti elemen akan mengisi seluruh lebar layar. Serta jarak antara elemen dengan tepi kiri layar ditentukan dengan menggunakan rumus 50% - 50vw, yang artinya elemen akan digeser sedemikian rupa dan pada akhirnya elemen akan memiliki posisi di tengah layar.

Untuk container sendiri pastikan memiliki max-width dan margin kiri & kanan kita set dengan nilai auto

.container {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

Untuk menghindari horizontal scrollbar anda dapat menambahkan style berikut

body {
  overflow-x: hidden;
}

Penggunakan :not

Kilian Valkhof memberikan solusi yang lebih simple, yaitu dengan menggunakan selector :not . Teknik ini lebih mudah dipakai jika dibandingkan dengan menggunakan grid layout.

Langkah yg pertama yaitu membuat sebuah container, atau sebuah batas tertentu mengenai lebar element yg ingin ditampilkan.

body > * {
  max-width: 40rem;
  margin: auto;
}

Dengan kombinasi margin: auto dan max-width: 40rem; akan membuat elemen menjadi di tengah. Saat ini semua elemen berada ditengah. untuk menerapkan fullbleed cukup tambahkan kode berikut

body > *:not(img) {
  max-width: 40rem;
  margin: auto;
}

Sekarang semua element kecuali img akan memiliki max-width. dan langkah terakhir yaitu tinggal menambahkan max-width: 100% untuk elemen img.

body img {
  display: block;
  max-width: 100%;
}

Kesimpulan

Pada akhirnya banyak sekali cara untuk mengimplementasikan full-bleed dengan CSS. Masing-masing memiliki kelebihan serta kekurangan. Namun Pada akhirnya, kita hanya perlu memilih layout yang tepat sesuai kebutuhan kita.