Tata Letak

Podcast CSS - 009: Tata Letak

Bayangkan Anda bekerja sebagai pengembang, dan seorang rekan desainer memberi Anda desain untuk {i>website<i} yang baru. Desainnya memiliki segala macam tata letak dan komposisi yang menarik: tata letak dua dimensi yang mempertimbangkan lebar dan tinggi area pandang, serta tata letak yang harus fleksibel dan fleksibel. Bagaimana Anda memutuskan cara terbaik untuk menata gaya ini dengan CSS?

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

Tata letak: histori 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 diadopsi secara luas oleh browser pada akhir tahun 90-an. CSS membuka pintu bagi developer untuk dapat sepenuhnya mengubah tampilan dan nuansa situs tanpa perlu menyentuh HTML. Kemampuan baru ini menginspirasi proyek seperti The CSS Zen Garden, yang dibuat untuk menunjukkan kekuatan CSS guna mendorong lebih banyak developer untuk mempelajarinya.

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

Tata letak: masa kini dan masa depan

CSS modern memiliki alat tata letak yang sangat canggih. Kita memiliki sistem khusus untuk tata letak dan kita akan melihat tingkat atas apa yang kita miliki, sebelum mempelajari 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 bertindak sebagai inline atau pemblokiran.

.my-element {
  display: inline;
}

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

Anda tidak dapat menetapkan lebar dan tinggi yang eksplisit pada elemen inline. Setiap margin dan padding tingkat blok akan diabaikan oleh elemen di sekitarnya.

.my-element {
    display: block;
}

Elemen blok tidak diletakkan berdampingan. Mereka membuat garis baru untuk diri mereka sendiri. Kecuali jika diubah oleh kode CSS lainnya, elemen blok akan meluas ke ukuran dimensi {i>inline<i}, sehingga dapat merentangkan lebar penuh dalam mode penulisan horizontal. Margin di semua sisi elemen blok akan dipatuhi.

.my-element {
    display: flex;
}

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

{i>flexbox<i} dan {i>Grid<i}

Ada dua mekanisme tata letak utama yang membuat aturan tata letak untuk beberapa elemen, yaitu flexbox dan grid. Keduanya memiliki kesamaan, tetapi dirancang untuk memecahkan masalah tata letak yang berbeda.

Kotak Flex

.my-element {
    display: flex;
}

Flexbox adalah mekanisme tata letak untuk tata letak satu dimensi. Tata letak pada sumbu tunggal, baik horizontal maupun vertikal. Secara {i>default<i}, {i>flexbox<i} akan menyelaraskan turunan elemen di samping satu sama lain, dalam arah {i>inline<i}, dan rentangnya ke arah blok, sehingga semuanya memiliki tinggi yang sama.

Item akan tetap berada di sumbu yang sama dan tidak digabungkan saat kehabisan ruang. Sebaliknya, mereka akan mencoba masuk ke jalur 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 bisa menulis aturan tentang perilakunya di dalam container fleksibel. Anda dapat mengubah perataan, urutan, dan justifikasi pada setiap item. Anda juga dapat mengubah penyusutan atau pertumbuhannya 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 kepada browser bagaimana tata letak seharusnya berperilaku ketika ditantang oleh dimensi konten dan area pandang. Hal ini menjadikannya mekanisme yang sangat berguna untuk desain web responsif.

Petak

.my-element {
    display: grid;
}

Grid mirip dalam banyak hal dengan flexbox, tetapi didesain 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 penataan gaya tata letak, seperti fungsi repeat() dan minmax(). Salah satu unit petak yang berguna adalah unit fr—yang merupakan pecahan dari ruang yang tersisa—Anda dapat membuat petak 12 kolom tradisional, dengan celah 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. Di mana flexbox kebanyakan memperlakukan item sebagai satu kelompok, memberi Anda kontrol yang akurat atas penempatannya dalam dua dimensi. Kita dapat menentukan bahwa item pertama dalam petak ini memerlukan 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 di petak agar membentang hingga 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 ditampilkan dalam alur normal. Ada sejumlah metode tata letak yang dapat Anda gunakan untuk menyesuaikan perilaku dan posisi item saat dalam alur normal.

Blok sebaris

Ingat bagaimana elemen di sekitarnya tidak mengikuti 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 level blok, tapi masih mengalir sebaris dengan teks.

p span {
    margin-top: 0.5rem;
}

Float

Jika Anda memiliki gambar yang berada dalam satu paragraf teks, Bukankah akan berguna jika teks itu membungkus gambar itu seperti yang mungkin Anda lihat di koran? Anda dapat melakukan ini dengan {i>float<i}.

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

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

Tata letak multikolom

Jika Anda memiliki daftar elemen yang sangat panjang, seperti daftar semua negara di dunia, hal ini dapat mengakibatkan banyak scroll dan waktu yang terbuang bagi pengguna. Hal ini juga dapat menimbulkan kelebihan spasi kosong di halaman. Dengan multikolom CSS, Anda dapat membagi ini menjadi beberapa kolom untuk membantu menyelesaikan masalah tersebut.

<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 itu menjadi dua kolom dan menambahkan celah di antara dua kolom.

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

Alih-alih mengatur jumlah kolom di mana konten dibagi, Anda juga dapat menentukan lebar minimum yang diinginkan, menggunakan column-width. Ketika lebih banyak ruang yang tersedia di area pandang, lebih banyak kolom akan dibuat secara otomatis dan ketika ruang berkurang, kolom juga akan berkurang. Hal ini sangat berguna dalam konteks desain web responsif.

Positioning

Terakhir pada ringkasan mekanisme tata letak ini adalah positioning. Properti position mengubah perilaku elemen dalam alur normal dokumen, dan bagaimana kaitannya dengan elemen lain. Opsi yang tersedia adalah relative, absolute, fixed, dan sticky dengan nilai default-nya adalah static.

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

Elemen ini didorong 10px ke bawah berdasarkan posisinya saat ini dalam dokumen, saat diposisikan relatif terhadap dirinya sendiri. Menambahkan position: relative ke elemen juga akan membuat blok yang memuat elemen turunan apa pun dengan position: absolute. Ini berarti bahwa turunannya akan diposisikan ulang ke elemen khusus ini, alih-alih induk relatif teratas, saat aplikasi 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;
}

Jika Anda menetapkan position ke absolute, memecah elemen dari alur dokumen saat ini. Ini berarti dua hal:

1. Anda dapat memosisikan elemen ini di mana pun Anda mau, menggunakan top, right, bottom, dan left di induk relatif terdekatnya.
2. Semua konten yang mengelilingi elemen absolut akan diubah posisi/geometrinya untuk mengisi sisa ruang yang tersisa oleh elemen tersebut.

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

Anda dapat mencapai fungsi anchor memperbaiki aspek fixed dan aspek relative dokumen yang lebih dapat diprediksi dengan menggunakan sticky. Dengan nilai ini, saat area pandang men-scroll melewati elemen, nilai tetap ditambatkan ke nilai top, right, bottom, dan left yang Anda tetapkan.

Penutup

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

Menguji pemahaman Anda

Menguji pengetahuan Anda tentang tata letak