Tutorial Tata Letak CSS: Dari Pendekatan Klasik hingga Teknik Terbaru

Diterbitkan: 2022-03-11

Menguasai tata letak web tanpa menguasai CSS sama layaknya dengan belajar berenang di daratan kering. Namun tidak seperti berenang – yang, setelah dikuasai, merupakan keterampilan yang akan tetap ada seumur hidup Anda – menguasai CSS adalah proses yang tidak pernah benar-benar berakhir karena CSS itu sendiri terus berkembang.

Tantangan ini diperparah oleh perbedaan dalam implementasi dan dukungan CSS di berbagai browser (dan bahkan di berbagai versi browser yang sama), serta tingkat adopsi rekomendasi CSS yang berbeda. Selama lebih dari satu dekade, desainer dan pengembang web telah bergulat dengan ledakan fitur CSS3 tambahan yang sporadis dan tidak konsisten yang didukung di setiap versi browser baru.

Namun, menguasai CSS adalah kebutuhan mutlak bagi setiap desainer atau pengembang web yang solid. Artikel ini akan memandu Anda melalui beberapa prinsip dasar tata letak CSS, mulai dari teknik CSS2 klasik hingga pendekatan tata letak terbaru di CSS3.

CATATAN: Semua contoh kode dalam artikel ini menggunakan elemen HTML5 dan sintaks Sass. Kode kerja lengkap dapat dikloning dari https://github.com/laureanoarcanio/css-layout-examples.

Gunakan Kasus

Salah satu cara terbaik untuk mempelajari suatu teknologi adalah dengan memiliki kasus penggunaan khusus yang Anda coba dukung atau masalah tertentu yang ingin Anda pecahkan. Untuk itu, kami akan fokus pada kasus penggunaan dengan serangkaian persyaratan tertentu.

Kasus penggunaan kami terdiri dari tata letak Aplikasi Web dengan beberapa perilaku dinamis. Ini akan memiliki elemen tetap pada halaman seperti header, footer, menu navigasi dan sub-navigasi, serta bagian konten yang dapat digulir. Berikut adalah persyaratan tata letak khusus:

Tata Letak Dasar
- Header, footer, menu navigasi, dan sub-navigasi semuanya tetap di scroll
- Elemen navigasi dan sub-navigasi menempati semua ruang kosong vertikal
- Bagian konten menggunakan semua ruang kosong yang tersisa di halaman dan memiliki area yang dapat digulir
Perilaku Dinamis
- Menu navigasi hanya menampilkan ikon secara default, tetapi dapat diperluas untuk menampilkan teks juga (dan kemudian dapat diciutkan untuk hanya menampilkan ikon lagi)
Variasi Tata Letak
- Beberapa halaman memiliki sub-navigasi di sebelah menu navigasi dan beberapa tidak

Tutorial CSS Menggunakan Teknik CSS2 Klasik

Sebagai permulaan, inilah markup HTML5 yang akan kita gunakan dengan contoh implementasi kita menggunakan CSS klasik:

 <body class="layout-classic"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Pemosisian Tetap

Di CSS2, kita dapat mencapai elemen tetap pada halaman (header, footer, dll.) dengan menggunakan model tata letak yang diposisikan yang menggunakan pemosisian tetap.

Selain itu, kami akan menggunakan properti CSS z-index untuk memastikan bahwa elemen tetap kami tetap "di atas" konten lain di halaman. Properti z-index menentukan urutan tumpukan elemen, di mana elemen dengan urutan tumpukan lebih besar selalu "di atas" elemen dengan urutan tumpukan lebih rendah. Perhatikan bahwa properti z-index hanya berfungsi dengan elemen yang diposisikan . Untuk contoh kita, kita akan secara sewenang-wenang menggunakan nilai z-index 20 (yang lebih tinggi dari default) untuk memastikan bahwa elemen tetap kita tetap secara visual di garis depan.

Juga, kami akan mengatur properti width ke 100% yang memerintahkan browser untuk menggunakan semua ruang yang tersedia secara horizontal untuk elemen.

 #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; }

Oke, jadi itu header dan footernya. Tapi bagaimana dengan #nav dan #subnav ?

Ekspansi CSS

Untuk #nav dan #subnav , kita akan menggunakan teknik yang sedikit lebih canggih yang dikenal sebagai CSS Expansion , yang dapat digunakan saat memposisikan elemen sebagai tetap (yaitu, pada posisi tetap pada halaman) atau sebagai absolut (yaitu, pada posisi tertentu relatif terhadap ancestor terdekatnya atau ke blok yang mengandung).

Ekspansi vertikal dicapai dengan menyetel properti top dan bottom elemen ke nilai tetap, sehingga elemen akan mengembang secara vertikal untuk menggunakan ruang vertikal yang tersisa. Pada dasarnya yang Anda lakukan adalah mengikat bagian atas elemen ke jarak tertentu dari bagian atas halaman dan bagian bawah elemen ke jarak tertentu dari bagian bawah halaman, sehingga elemen mengembang untuk mengisi seluruh ruang vertikal antara dua titik tersebut.

Demikian pula, ekspansi horizontal dicapai dengan menyetel properti left dan right elemen ke nilai tetap, sehingga elemen akan mengembang secara horizontal untuk menggunakan ruang horizontal yang tersisa.

Untuk kasus penggunaan kami, kami perlu menggunakan ekspansi vertikal.

 #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; }

Pemosisian Default (Statis)

Area konten utama yang dapat digulir dapat dengan mudah mengandalkan pemosisian default (statis), di mana elemen dirender secara berurutan saat muncul dalam aliran dokumen. Karena semua yang lain di halaman kami berada dalam posisi tetap, elemen ini adalah satu-satunya yang ada di aliran dokumen. Akibatnya, yang perlu kita lakukan untuk memposisikannya dengan benar adalah menentukan properti margin untuk menghindari tumpang tindih dengan header, footer, dan nav/subnav tetap:

 #main { margin: 6em 0 4em 20em; }

Dan dengan itu, kami telah memenuhi persyaratan tata letak dasar dari kasus penggunaan kami menggunakan CSS2, tetapi kami masih perlu memenuhi persyaratan tambahan untuk fungsionalitas dinamis.

Perilaku Dinamis Menggunakan Teknik CSS2 Klasik

Persyaratan menyatakan bahwa menu Navigasi kami akan secara default hanya menampilkan ikon, tetapi akan dapat diperluas untuk menampilkan teks juga (dan kemudian dapat diciutkan untuk menampilkan lagi hanya ikon).

Mari kita mulai dengan menambahkan 5em ke lebar menu navigasi saat diperluas. Kami akan melakukan ini dengan membuat kelas CSS "diperluas" yang dapat kami tambahkan atau hapus secara dinamis dari elemen menu navigasi:

 #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } }

Berikut adalah contoh kode JavaScript (dalam contoh ini, kami menggunakan jQuery) yang dapat digunakan untuk secara dinamis beralih menu navigasi antara mode diperluas dan diciutkan, berdasarkan pengguna mengklik ikon tombol navigasi:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav'').toggleClass('expanded'); });

Dan dengan itu, menu navigasi kami sekarang dapat diperluas atau diciutkan secara dinamis. Besar.

Yah, agak bagus, tapi tidak cukup. Meskipun menu navigasi sekarang dapat diperluas dan menyusut, menu tersebut tidak berfungsi dengan baik dengan sisa halaman. Menu nav yang diperluas sekarang tumpang tindih dengan subnav yang jelas bukan perilaku yang diinginkan.

Ini mengungkapkan salah satu batasan utama CSS2; yaitu, ada terlalu banyak yang perlu di-hardcode dengan nilai posisi tetap. Akibatnya, untuk elemen lain pada halaman yang perlu diposisikan ulang untuk mengakomodasi menu navigasi yang diperluas, kita perlu mendefinisikan kelas CSS "diperluas" tambahan dengan nilai posisi yang lebih tetap.

 #subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }

Kami kemudian perlu memperluas kode JavaScript kami untuk menambahkan penyesuaian dinamis dari elemen-elemen lain ini juga ketika tombol navigasi diklik oleh pengguna:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });

Oke, itu bekerja lebih baik.

Variasi Tata Letak Menggunakan Teknik CSS2 Klasik

Sekarang mari kita bahas persyaratan memiliki beberapa halaman yang menyembunyikan menu sub nav. Secara khusus, kami ingin menu sub nav disembunyikan ketika pengguna mengklik ikon "pengguna" di area nav utama.

Jadi pertama-tama, kita akan membuat kelas baru "tersembunyi" yang menerapkan display: none :

 .hidden { display: none; }

Dan sekali lagi, kita akan menggunakan JavaScript (jQuery) untuk menerapkan kelas CSS “tersembunyi” ke elemen #subnav saat pengguna mengklik ikon pengguna:

 $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); });

Dengan tambahan ini, elemen #subnav disembunyikan dengan benar saat pengguna mengklik ikon "pengguna", tetapi ruang yang ditempati tetap tidak digunakan , daripada elemen lain yang diperluas untuk menggunakan ruang yang dikosongkan oleh elemen #subnav .

Untuk mendapatkan perilaku yang diinginkan saat menyembunyikan elemen #subnav , kita akan menggunakan salah satu pemilih CSS yang kurang dikenal, namun sangat berguna, yang dikenal sebagai pemilih saudara yang berdekatan .

Pemilih CSS Saudara Berdekatan

Pemilih saudara yang berdekatan memungkinkan Anda untuk menentukan dua elemen, memilih hanya contoh elemen kedua yang segera mengikuti elemen pertama yang ditentukan.

Misalnya, berikut ini hanya akan memilih elemen dengan ID main yang segera mengikuti elemen dengan subnav ID :

 #subnav + #main { margin-left: 20em; }

Cuplikan CSS di atas menyetel margin kiri #main menjadi 20em jika dan hanya jika segera mengikuti #subnav yang ditampilkan.

Namun, jika #nav diperluas (yang menyebabkan kelas yang expanded ditambahkan ke #main juga, berdasarkan kode kami sebelumnya), kami memindahkan margin kiri #main ke 25em.

 #subnav + #main.expanded { margin-left: 25em; }

Dan, jika #subnav disembunyikan, kita pindahkan margin kiri #main ke 6em menjadi tepat di sebelah #nav :

 #subnav.hidden + #main { margin-left: 6em; }

(Catatan: Salah satu kelemahan menggunakan pemilih saudara yang berdekatan adalah memaksa kita untuk selalu memiliki #subnav yang ada di DOM, terlepas dari apakah itu ditampilkan atau tidak.)

Terakhir, jika #subnav disembunyikan dan #nav diperluas, kami menetapkan margin kiri #main di 11em :

 #subnav.hidden + #main.expanded { margin-left: 11em; }

Ini memungkinkan kita untuk menyatukan semuanya tanpa kode JavaScript yang berat, tetapi kita juga dapat melihat betapa rumitnya kode ini jika kita menambahkan lebih banyak elemen ke halaman. Kami melihat lagi bahwa, dengan CSS2, banyak hardcoding nilai posisi diperlukan agar semuanya berfungsi dengan baik.

Memanfaatkan CSS3

CSS3 menawarkan fungsionalitas yang ditingkatkan secara signifikan dan teknik tata letak yang membuatnya lebih mudah digunakan dan jauh lebih sedikit bergantung pada nilai hardcoded. CSS3 secara inheren dirancang untuk mendukung perilaku yang lebih dinamis dan, dalam pengertian itu, lebih "dapat diprogram". Mari kita periksa beberapa kapabilitas baru ini yang terkait dengan use case kita.

CSS3 `calc()` Fungsi

Fungsi CSS3 calc() yang baru dapat digunakan untuk menghitung nilai properti CSS secara dinamis (namun, perlu diperhatikan bahwa dukungan bervariasi di seluruh browser). Ekspresi yang diberikan ke fungsi calc() dapat berupa ekspresi sederhana apa pun yang menggabungkan operator aritmatika dasar ( + , - , * , / ) menggunakan aturan prioritas operator standar.

Penggunaan fungsi calc() dapat membantu menghindari banyak hardcoding nilai yang diperlukan oleh CSS2. Dalam kasus kami, ini memungkinkan kami untuk mencapai perluasan CSS secara lebih dinamis. Sebagai contoh:

 #nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }

Dengan spesifikasi height di atas menggunakan fungsi calc() , kami mencapai hasil yang sama seperti yang kami lakukan di CSS2 dengan top:6em dan bottom:4em , tetapi dengan cara yang jauh lebih fleksibel dan adaptif, dan tanpa perlu hardcode top dan bottom nilai-nilai.

Tata Letak Flexbox CSS3

Flexbox adalah tata letak baru yang diperkenalkan di CSS3 (dukungan bervariasi antar browser). Tata letak flexbox membuatnya lebih mudah untuk mengatur elemen pada halaman dengan cara yang dapat diprediksi di berbagai ukuran layar, resolusi, dan perangkat. Oleh karena itu sangat berguna dalam konteks desain web responsif.

Fitur utama meliputi:

Memposisikan elemen anak jauh lebih mudah dan tata letak yang kompleks dapat dicapai dengan lebih sederhana dan dengan kode yang lebih bersih.
Elemen anak dapat ditata ke segala arah dan dapat memiliki dimensi yang fleksibel untuk beradaptasi dengan ruang tampilan.
Elemen turunan secara otomatis memperluas kontrak untuk beradaptasi dengan ruang kosong yang tersedia.

Flexbox memperkenalkan serangkaian istilah dan konsep uniknya sendiri. Beberapa di antaranya adalah:

Wadah fleksibel. Elemen dengan properti display diatur ke flex atau inline-flex yang berfungsi sebagai elemen penampung untuk item flex.
Barang fleksibel. Elemen apa pun dalam wadah fleksibel. (Catatan: Teks yang langsung dimuat dalam wadah fleksibel dibungkus dalam item fleksibel anonim.)
sumbu . Setiap layout flexbox memiliki flex-directio n yang menunjuk sumbu utama di mana item flex diletakkan. Sumbu silang kemudian sumbu tegak lurus terhadap sumbu utama.
Garis. Item fleksibel dapat diletakkan pada satu baris atau beberapa baris sesuai dengan properti flex-wrap .
Ukuran. Setara flexbox tinggi dan lebar adalah main size cross size , yang masing-masing menentukan ukuran sumbu utama dan sumbu silang wadah fleksibel.

Oke, jadi dengan intro singkat itu, inilah markup alternatif yang bisa kita gunakan jika kita menggunakan tata letak flexbox:

 <body class="layout-flexbox"> <header></header> <div class="content-area"> <nav></nav> <aside></aside> <main></main> </div> <footer></footer> </body>

Untuk contoh kasus penggunaan kami, tata letak utama kami (header, konten, footer) adalah vertikal, jadi kami akan mengatur flexbox kami untuk menggunakan tata letak kolom:

 .layout-flexbox { display: flex; flex-direction: column; }

Meskipun tata letak utama kami vertikal, elemen di area konten kami (nav, subnav, utama) diletakkan secara horizontal. Setiap wadah fleksibel hanya dapat menentukan satu arah (yaitu, tata letaknya harus horizontal atau vertikal). Oleh karena itu, ketika tata letak membutuhkan lebih dari ini (kasus umum adalah untuk tata letak aplikasi), kita dapat menyarangkan beberapa wadah satu di dalam wadah lainnya, masing-masing dengan tata letak arah yang berbeda.

Itu sebabnya kami menambahkan wadah tambahan (yang saya sebut sebagai content-area ) yang membungkus #nav , #subnav , dan #main . Dengan cara ini, tata letak keseluruhan bisa vertikal, sedangkan konten area konten bisa ditata secara horizontal.

Sekarang untuk memposisikan item flex kita, kita akan menggunakan properti flex yang merupakan singkatan dari flex: <flex-grow> <flex-shrink> <flex-basis>; . Ketiga properti fleksibel tersebut adalah yang menentukan bagaimana item fleksibel kami mendistribusikan ruang kosong yang tersisa di antara mereka dalam arah aliran, sebagai berikut:

flex-grow: menentukan seberapa banyak item dapat tumbuh relatif terhadap item fleksibel lainnya di dalam wadah yang sama
flex-shrink: menentukan bagaimana suatu item dapat menyusut relatif terhadap item fleksibel lainnya di dalam wadah yang sama
flex-basis: menentukan ukuran awal item (yaitu, sebelum menyusut atau bertambah)

Menyetel flex-grow dan flex-shrink keduanya ke nol berarti bahwa ukuran item tetap dan tidak akan bertambah atau menyusut untuk mengakomodasi lebih banyak atau lebih sedikit ruang kosong yang tersedia. Inilah yang kami lakukan untuk header dan footer kami karena mereka memiliki ukuran tetap:

 #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }

Agar item mengambil semua ruang kosong yang tersedia, setel nilai flex-grow dan flex-shrink keduanya ke 1 dan setel nilai flex-basis ke auto . Inilah yang kami lakukan untuk area konten karena kami ingin mengambil semua ruang kosong yang tersedia.

Dan seperti yang kami nyatakan sebelumnya, kami ingin item di dalam content-area diletakkan dalam arah baris, jadi kami akan menambahkan display: flex ; dan flex-direction: row; . Ini menjadikan content-area wadah fleksibel baru untuk #nav , #subnav dan `#main.

Jadi inilah yang kami dapatkan untuk CSS untuk content-area :

 .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ }

Di area konten, #nav dan #subnav memiliki ukuran tetap, jadi kami hanya mengatur properti flex yang sesuai:

 #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }

(Perhatikan bahwa saya telah menambahkan overflow-y: hidden ke spesifikasi CSS ini untuk mengatasi konten yang melebihi dan memenuhi tinggi wadah. Chrome sebenarnya tidak memerlukan ini tetapi FireFox membutuhkannya.)

#main akan mengambil sisa ruang kosong:

 #main { flex: 1 1 auto; overflow-y: auto; }

Ini semua terlihat bagus, jadi sekarang mari tambahkan perilaku dinamis kita ke ini dan lihat bagaimana hasilnya.

JavaScript identik dengan apa yang kami miliki sebelumnya (kecuali di sini, kelas wadah elemen CSS yang kami tentukan adalah layout-flexbox sedangkan sebelumnya adalah layout-classic ):

 $('.layout-flexbox #nav').on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });

Kami menambahkan kelas yang expanded ke CSS sebagai berikut:

 #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }

Dan voila!

Perhatikan bahwa kali ini kita tidak perlu memberi tahu item lain tentang perubahan lebar, karena tata letak flexbox menangani semua itu untuk kita.

Satu-satunya yang tersisa adalah menyembunyikan sub nav. Dan coba tebak? Itu "hanya berfungsi" juga, tanpa perubahan tambahan, menggunakan kode JavaScript yang sama seperti sebelumnya. Flexbox mengetahui tentang ruang kosong dan secara otomatis membuat tata letak kami berfungsi tanpa kode tambahan. Cukup keren.

Flexbox juga menyediakan beberapa cara menarik untuk memusatkan elemen vertikal dan horizontal. Kami menyadari di sini betapa pentingnya bahasa presentasi untuk memasukkan gagasan tentang ruang kosong dan seberapa skalabel kode kami dengan menggunakan teknik semacam ini. Di sisi lain, konsep dan notasi di sini bisa membutuhkan sedikit lebih banyak untuk dikuasai daripada CSS klasik.

Tata Letak Kotak CSS3

Jika Tata Letak Flexbox berada di ujung tombak CSS3, maka Tata Letak Grid dapat dikatakan berada di ujung yang berdarah. Spesifikasi W3C masih dalam keadaan draft dan masih memiliki dukungan browser yang cukup terbatas. (Ini diaktifkan di Chrome melalui tanda "fitur Platform Web eksperimental" di chrome://flags).

Yang mengatakan, saya pribadi tidak menganggap rancangan ini revolusioner. Sebaliknya, seperti yang dinyatakan oleh prinsip-prinsip desain HTML5: “Ketika sebuah praktik sudah tersebar luas di kalangan penulis, pertimbangkan untuk mengadopsinya daripada melarangnya atau menciptakan sesuatu yang baru.”

Dengan demikian, grid berbasis markup telah digunakan untuk waktu yang lama, jadi sekarang Tata Letak Grid CSS benar-benar hanya mengikuti paradigma yang sama, menawarkan semua manfaatnya dan lebih banyak lagi di lapisan presentasi tanpa persyaratan markup.

Ide umumnya adalah memiliki tata letak grid yang telah ditentukan, tetap, atau fleksibel di mana kita dapat memposisikan elemen kita. Seperti flexbox, ia juga bekerja berdasarkan prinsip ruang kosong dan memungkinkan kita untuk menentukan "arah" vertikal dan horizontal dalam elemen yang sama, yang membawa keuntungan dalam ukuran kode dan fleksibilitas.

Tata letak kisi memperkenalkan 2 jenis kisi; yaitu, eksplisit dan implisit . Untuk kesederhanaan, kita akan fokus pada grid eksplisit dalam hal ini.

Seperti flexbox, tata letak Grid memperkenalkan kumpulan istilah dan konsepnya sendiri yang unik. Beberapa di antaranya adalah:

Wadah kisi. Sebuah elemen dengan properti display diatur ke "grid" atau "inline-grid" di mana elemen yang terkandung diletakkan dengan memposisikan dan menyelaraskan ke grid yang telah ditentukan (mode eksplisit). Kisi adalah kumpulan garis kisi horizontal dan vertikal yang berpotongan yang membagi ruang wadah kisi menjadi sel kisi. Ada dua set garis grid; satu untuk mendefinisikan kolom dan satu ortogonal untuk itu untuk mendefinisikan baris.
Jalur kisi. Ruang antara dua garis grid yang berdekatan. Setiap trek kisi diberi fungsi ukuran, yang mengontrol seberapa lebar atau tinggi kolom atau baris dapat tumbuh, dan dengan demikian seberapa jauh jarak garis kisi pembatasnya.
Sel kisi. Ruang antara dua baris yang berdekatan dan dua garis grid kolom yang berdekatan. Ini adalah unit terkecil dari kisi yang dapat direferensikan saat memposisikan item kisi.
Panjang fleksibel. Dimensi yang ditentukan dengan unit fr , yang mewakili sebagian kecil dari ruang kosong di wadah kisi.

Berikut markup alternatif yang dapat kita gunakan jika kita menggunakan tata letak Grid:

 <body class="layout-grid"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Perhatikan bahwa dengan tata letak ini, kita tidak memerlukan pembungkus tambahan untuk area konten seperti yang kita lakukan untuk flexbox, karena jenis tata letak ini memungkinkan kita untuk menentukan penunjukan ruang elemen di kedua arah dalam wadah kisi yang sama.

Mari gali CSS sekarang:

 .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }

Kami telah mendefinisikan display: grid; pada wadah kami. Properti grid-template-columns dan grid-template-rows masing-masing ditentukan sebagai daftar spasi di antara trek grid. Dengan kata lain, nilai-nilai tersebut bukanlah posisi garis grid; sebaliknya, mereka mewakili jumlah ruang antara dua trek.

Perhatikan bahwa unit pengukuran dapat ditentukan sebagai:

panjang
persentase dari ukuran wadah kisi
pengukuran konten yang menempati kolom atau baris, atau
sebagian kecil dari ruang kosong di grid

Jadi dengan grid-template-columns: auto 0 auto 1em 1fr; kami akan memiliki:

1 trek menentukan 2 kolom lebar auto ( #nav space)
1 talang 0 (margin untuk #subnav berada di level elemen, karena bisa ada atau tidak, dengan cara ini kita menghindari talang ganda)
1 track menentukan 2 kolom lebar auto ( #subnav space)
1 selokan 1em
1 lagu menggunakan 1fr untuk #main (akan mengambil semua ruang yang tersisa)

Di sini kami banyak menggunakan nilai auto untuk trek, yang memungkinkan kami memiliki kolom dinamis di mana posisi dan ukuran garis ditentukan oleh konten maksimumnya. (Oleh karena itu, kita perlu menentukan ukuran untuk elemen #nav dan #subnav , yang akan segera kita lakukan.)

Demikian pula, untuk baris baris kita memiliki grid-template-rows: 5em 1em 1fr 1em 3em; yang menetapkan #header dan #footer kami untuk diperbaiki dan semua elemen di antaranya menggunakan ruang kosong yang tersisa saat menggunakan talang 1em .

Sekarang mari kita lihat bagaimana kita menempatkan elemen sebenarnya untuk diposisikan ke dalam grid yang kita tentukan:

 #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }

Ini menentukan bahwa kita ingin header kita berada di antara garis kisi 1 dan 6 (lebar penuh), dan antara garis kisi 1 dan 2 untuk baris kita. Sama untuk footer, tetapi di antara dua baris terakhir (bukan dua yang pertama). Dan area utama diatur dengan tepat untuk ruang yang seharusnya ditempati.

Perhatikan bahwa properti grid-column dan grid-row adalah singkatan untuk menentukan grid-column-start / grid-column-end dan grid-row-start / grid-row-end , masing-masing.

Oke, jadi kembali ke #nav dan #subnav . Karena kita sebelumnya menempatkan #nav dan #subnav ke trek dengan nilai otomatis, kita perlu menentukan seberapa lebar elemen ini (sama untuk mode yang diperluas, kita hanya mengubah lebarnya dan Tata Letak Kotak akan menangani sisanya).

 #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; }

Jadi sekarang kita dapat mengaktifkan #nav dan juga menyembunyikan/menghapus #subnav dan semuanya berfungsi dengan baik! Tata letak kisi juga memungkinkan kita untuk menggunakan alias untuk garis kita, sehingga pada akhirnya mengubah kisi tidak akan merusak kode karena dipetakan ke nama dan bukan garis kisi. Pastinya menantikan ini menjadi lebih banyak didukung oleh lebih banyak browser.

Kesimpulan

Bahkan dengan teknik CSS klasik, masih banyak lagi yang dapat dicapai daripada yang disadari atau dimanfaatkan oleh banyak pengembang web. Yang mengatakan, banyak dari ini bisa sangat membosankan dan dapat melibatkan hardcoding nilai berulang kali di seluruh style sheet.

CSS3 telah mulai memberikan teknik tata letak yang jauh lebih canggih dan fleksibel yang secara signifikan lebih mudah untuk diprogram dan yang menghindari banyak kebosanan dari spesifikasi CSS sebelumnya.

Menguasai teknik dan paradigma ini – baik untuk CSS2 dan CSS3 – sangat penting untuk memanfaatkan semua yang ditawarkan CSS untuk mengoptimalkan pengalaman pengguna dan kualitas kode Anda. Artikel ini benar-benar hanya mewakili puncak gunung es dari semua yang perlu dipelajari dan semua yang dapat dicapai dengan kekuatan dan fleksibilitas CSS. Memiliki itu!

Terkait: *Menjelajahi SMACSS: Arsitektur Scalable dan Modular untuk CSS*