Tata Letak

Podcast CSS - 009: Tata Letak

Bayangkan Anda bekerja sebagai pengembang, dan seorang kolega desainer memberi Anda desain untuk situs web baru. Desain ini memiliki segala jenis tata letak dan komposisi yang menarik: tata letak dua dimensi yang mempertimbangkan lebar dan tinggi area pandang, serta tata letak yang harus lancar dan fleksibel. Bagaimana Anda memutuskan cara terbaik untuk menata gaya ini dengan CSS?

CSS memberi kita berbagai cara untuk menyelesaikan masalah tata letak, pada sumbu horizontal, sumbu vertikal, atau bahkan keduanya. Memilih metode tata letak yang tepat untuk konteks bisa jadi sulit, dan sering kali Anda mungkin memerlukan lebih dari satu metode tata letak untuk menyelesaikan masalah. Untuk membantu hal ini, dalam modul berikut, Anda akan mempelajari fitur unik dari setiap mekanisme tata letak CSS sebagai dasar pengambilan keputusan tersebut.

Tata letak: riwayat singkat

Pada masa-masa awal web, desain yang lebih kompleks daripada dokumen sederhana ditata dengan elemen <table>. Memisahkan HTML dari gaya visual menjadi lebih mudah ketika CSS digunakan secara luas oleh browser pada akhir tahun 90-an. CSS membuka pintu bagi developer untuk dapat sepenuhnya mengubah tampilan dan nuansa situs web tanpa perlu menyentuh HTML. Kemampuan baru ini menginspirasi project seperti The CSS Zen Garden, yang dibuat untuk mendemonstrasikan kekuatan CSS untuk mendorong lebih banyak developer agar mempelajarinya.

CSS telah berkembang seiring dengan perkembangan kebutuhan kita akan desain web dan teknologi browser. Anda dapat membaca perkembangan tata letak CSS dan pendekatan kami terhadap tata letak dari waktu ke waktu dalam artikel oleh Rachel Andrew ini.

Tata letak: masa kini dan masa depan

CSS modern memiliki alat tata letak yang sangat canggih. Kami memiliki sistem khusus untuk tata letak dan akan melakukan tinjauan tingkat tinggi atas apa yang kami miliki, sebelum mendalami lebih detail tentang Flexbox dan Grid di modul berikutnya.

Memahami properti display

Properti display melakukan dua hal. Hal pertama yang dilakukannya adalah menentukan apakah kotak yang diterapkan akan berfungsi sebagai inline atau memblokir.

.my-element {
  display: inline;
}

Elemen inline berperilaku seperti kata dalam kalimat. Mereka duduk berdampingan dalam arah yang selaras. Elemen seperti <span> dan <strong>, yang biasanya digunakan untuk menata gaya potongan teks di dalam elemen yang memuatnya seperti <p> (paragraf), secara default ditampilkan inline. Elemen ini juga mempertahankan spasi kosong di sekitarnya.

Anda tidak dapat menetapkan lebar dan tinggi yang jelas pada elemen inline. Margin dan padding tingkat blok apa pun akan diabaikan oleh elemen di sekitarnya.

.my-element {
    display: block;
}

Elemen blok tidak berdiri berdampingan. Dia membuat garis baru untuk diri mereka sendiri. Kecuali jika diubah oleh kode CSS lain, elemen blok akan diperluas ke ukuran dimensi inline, sehingga mencakup lebar penuh dalam mode penulisan horizontal. Margin pada semua sisi elemen blok akan dipatuhi.

.my-element {
    display: flex;
}

Properti display juga menentukan perilaku turunan elemen. Misalnya, menetapkan properti display ke display: flex akan membuat kotak ini menjadi kotak tingkat blok, dan juga mengonversi turunannya menjadi item fleksibel. Ini memungkinkan properti fleksibel yang mengontrol perataan, pengurutan, dan alur.

Flexbox dan Petak

Ada dua mekanisme tata letak utama yang membuat aturan tata letak untuk beberapa elemen, flexbox dan grid. Keduanya memiliki kesamaan, tetapi didesain untuk memecahkan masalah {i>layout<i} yang berbeda.

Flexbox

.my-element {
    display: flex;
}

Flexbox adalah mekanisme tata letak untuk tata letak satu dimensi. Tata letak melintasi sumbu tunggal, baik secara horizontal maupun vertikal. Secara default, flexbox akan menyejajarkan turunan elemen secara berdampingan, dalam arah yang sejajar, dan meregangkannya ke arah blok, sehingga tingginya semua sama.

Item akan tetap berada di sumbu yang sama dan tidak terbungkus ketika ruang penyimpanan habis. Sebaliknya, mereka akan mencoba untuk menekan ke garis yang sama satu sama lain. Perilaku ini dapat diubah menggunakan properti align-items, justify-content, dan flex-wrap.

Flexbox juga mengonversi elemen turunan menjadi item fleksibel, yang berarti Anda dapat menulis aturan tentang perilakunya di dalam penampung fleksibel. Anda dapat mengubah perataan, urutan, dan justifikasi pada setiap item. Anda juga dapat mengubah cara menyusut atau berkembang menggunakan properti flex.

.my-element div {
    flex: 1 0 auto;
}

Properti flex adalah singkatan untuk flex-grow, flex-shrink, dan flex-basis. Anda dapat meluaskan contoh di atas seperti ini:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

Developer menyediakan aturan tingkat rendah ini untuk memberi petunjuk ke browser tentang perilaku tata letak saat ditantang oleh dimensi konten dan area pandang. Hal ini menjadikannya mekanisme yang sangat berguna untuk desain web responsif.

Kisi

.my-element {
    display: grid;
}

Petak mirip dalam banyak hal dengan flexbox, tetapi dirancang untuk mengontrol tata letak multi-sumbu, bukan tata letak sumbu tunggal (ruang vertikal atau horizontal).

Petak memungkinkan Anda menulis aturan tata letak pada elemen yang memiliki display: grid, dan memperkenalkan beberapa primitif baru untuk gaya visual tata letak, seperti fungsi repeat() dan minmax(). Satu unit petak yang berguna adalah unit fr—yang merupakan bagian dari ruang yang tersisa—Anda dapat membuat petak 12 kolom tradisional, dengan jarak di antara setiap item, dengan 3 properti CSS:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

Contoh di atas menunjukkan tata letak sumbu tunggal. Jika flexbox sebagian besar memperlakukan item sebagai kelompok, petak memberi Anda kontrol yang akurat atas penempatannya dalam dua dimensi. Kita bisa menentukan bahwa item pertama dalam {i>grid<i} ini membutuhkan 2 baris dan 3 kolom:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

Properti grid-row dan grid-column menginstruksikan elemen pertama dalam petak agar membentang ke awal kolom keempat, dari kolom pertama, lalu membentang ke baris ketiga, dari baris pertama.

Tata letak flow

Jika tidak menggunakan {i>grid<i} atau {i>flexbox<i}, elemen Anda akan ditampilkan dalam alur normal. Ada sejumlah metode tata letak yang bisa Anda gunakan untuk menyesuaikan perilaku dan posisi item saat dalam alur normal.

Blok inline

Ingat bagaimana elemen di sekitarnya tidak mematuhi margin blok dan padding pada elemen inline? Dengan inline-block, Anda dapat menyebabkan hal tersebut terjadi.

p span {
    display: inline-block;
}

Menggunakan inline-block akan memberi Anda kotak yang memiliki beberapa karakteristik elemen tingkat blok, tetapi masih mengalir sesuai dengan teks.

p span {
    margin-top: 0.5rem;
}

Float

Jika Anda memiliki gambar yang terletak di dalam paragraf teks, bukankah akan berguna jika teks itu mengemas gambar itu seperti yang mungkin Anda lihat di koran? Anda dapat melakukannya dengan {i>float<i}.

img {
    float: left;
    margin-right: 1em;
}

Properti float menginstruksikan elemen untuk "mengambang" ke arah yang ditentukan. Gambar dalam contoh ini diperintahkan untuk mengambang ke kiri, yang kemudian memungkinkan elemen yang setara untuk "membungkus" gambar di sekitarnya. Anda dapat menginstruksikan elemen untuk mengambang left, right, atau inherit.

Tata letak multi-kolom

Jika Anda memiliki daftar elemen yang sangat panjang, seperti daftar semua negara di dunia, hal ini dapat menyebabkan banyak scroll dan waktu yang terbuang bagi pengguna. Hal ini juga dapat membuat kelebihan spasi kosong di halaman. Dengan multi-kolom CSS, Anda dapat membaginya menjadi beberapa kolom untuk membantu kedua masalah ini.

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

Hal ini secara otomatis membagi daftar panjang tersebut menjadi dua kolom dan menambahkan jarak di antara dua kolom.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

Daripada menetapkan jumlah kolom tempat konten dibagi, Anda juga dapat menentukan lebar minimum yang diinginkan menggunakan column-width. Seiring bertambahnya ruang yang tersedia di area pandang, semakin banyak kolom yang akan dibuat secara otomatis dan seiring ruang berkurang, kolom juga akan berkurang. Hal ini sangat berguna dalam konteks desain web responsif.

Mengenal

Yang terakhir dari ringkasan mekanisme tata letak ini adalah pemosisian. Properti position mengubah perilaku elemen dalam alur normal dokumen, dan kaitannya dengan elemen lain. Opsi yang tersedia adalah relative, absolute, fixed, dan sticky dengan nilai defaultnya adalah static.

.my-element {
  position: relative;
  top: 10px;
}

Elemen ini digeser 10 piksel ke bawah berdasarkan posisinya saat ini dalam dokumen, karena diposisikan relatif terhadap elemen itu sendiri. Menambahkan position: relative ke elemen juga akan menjadikannya sebagai blok berisi elemen turunan dengan position: absolute. Ini berarti turunannya sekarang akan diposisikan ulang ke elemen khusus ini, bukan ke induk relatif paling atas, jika memiliki posisi absolut yang diterapkan padanya.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

Saat Anda menetapkan position ke absolute, tindakan ini akan memisahkan elemen dari alur dokumen saat ini. Ini berarti dua hal:

1. Anda dapat menempatkan elemen ini di mana pun Anda inginkan, menggunakan top, right, bottom, dan left di induk relatif terdekatnya.
2. Semua konten di sekitar elemen absolut berubah posisi/geometri untuk mengisi ruang tersisa yang tersisa oleh elemen tersebut.

Elemen dengan nilai position dari fixed berperilaku dengan cara yang mirip dengan absolute, dengan induknya adalah elemen <html> root. Elemen posisi tetap berada di anchor dari kiri atas berdasarkan nilai top, right, bottom, dan left yang Anda tetapkan.

Anda dapat mencapai aspek tetap fixed yang tetap dan aspek pendukung alur dokumen yang lebih dapat diprediksi dari relative menggunakan sticky. Dengan nilai ini, saat di-scroll melewati elemen, area pandang akan tetap menambatkan ke nilai top, right, bottom, dan left yang Anda tetapkan.

Rangkuman

Ada banyak pilihan dan fleksibilitas terkait tata letak CSS. Untuk mempelajari lebih lanjut kemampuan Flexbox dan Grid CSS, lanjutkan ke beberapa modul berikutnya.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang tata letak