Beberapa tahun yang lalu, saya duduk untuk membina sebuah papan pemuka. Tiada apa yang hebat—hanya bar sisi yang tetap, kawasan kandungan utama, dan footer. Flexbox terasa seperti pilihan yang jelas, dan pada mulanya, ia berfungsi dengan baik. Kemudian saya memasukkan satu baris kad ke dalam bahagian utama. Keseluruhan susun atur menjadi kucar-kacir. Saya menghabiskan masa tiga jam berikutnya bergelut dengan nisbah flex-grow dan lebar peratusan bersarang, melihat bekas-bekas enggan selari tidak kira berapa banyak padding yang saya kurangkan. Halaman tersebut terasa seperti menara yang hampir runtuh.

Pengalaman pahit itu mengajar saya satu perkara paling penting tentang susun atur CSS moden: Flexbox dan Grid bukanlah pesaing. Ia adalah alatan untuk tugasan yang berbeza, dan kebanyakan susun atur yang gagal berpunca daripada penggunaan alatan yang salah.

Perbezaannya Adalah Dimensi

Bayangkan Flexbox sebagai sebuah lorong. Item mengalir dalam satu arah, sama ada sebagai baris atau sebagai lajur. Ia dibina untuk pengagihan satu dimensi. Pelayar melihat kandungan, kemudian memutuskan cara untuk meregang, mengecil, atau menyelaraskannya di sepanjang paksi tunggal tersebut. Ini menjadikan Flexbox sangat sesuai untuk situasi di mana kandungan menentukan susun atur. Bar navigasi, timbunan medan borang, atau set tag yang memerlukan jarak yang sama semuanya terletak secara semula jadi dalam bekas flex kerana mereka berkongsi satu logik baris.

Grid pula adalah pelan lantai. Ia adalah dua dimensi secara ketat, mengendalikan baris dan lajur pada masa yang sama. Anda menentukan struktur terlebih dahulu, kemudian anda meletakkan item di dalamnya. Ini menjadikan Grid ideal untuk seni bina keseluruhan halaman—di mana-mana sahaja anda perlu mengawal kedudukan menegak dan mendatar secara bersama. Apabila anda cuba memaksa reka bentuk dua dimensi yang kompleks melalui bekas Flexbox yang bersarang, anda akhirnya akan mendapat markup yang dalam, pembungkus yang rapuh, dan pengiraan matematik yang tidak stabil yang akan hancur sebaik sahaja anda menambah satu elemen tambahan.

Flexbox Masih Mempunyai Kegunaannya

Jangan terburu-buru menggantikan setiap bekas flex dengan Grid. Di dalam komponen individu, Flexbox selalunya lebih bersih dan lebih mudah. Jika anda mempunyai footer kad dengan dua butang dan anda mahu satu selari ke kiri dan satu lagi ke kanan, justify-content: space-between melakukan tepat apa yang anda maksudkan. Jika anda perlu menyelaraskan ikon secara menegak di dalam butang dengan ketinggian yang tidak diketahui, align-items: center adalah jalan yang paling mudah. Kandungan berubah-ubah—seperti baris lencana pengguna dengan panjang nama yang berbeza—sesuai dengan selesa di dalam Flexbox kerana ia mengutamakan kandungan. Bekas tersebut menyesuaikan diri dengan apa yang diisinya.

Grid pula mengutamakan bekas. Anda memberitahu pelayar berapa banyak trek yang wujud dan berapa saiznya, kemudian anda memasukkan item ke dalam sel-sel tersebut. Jika susun atur anda hanyalah satu baris tunggal item yang berkongsi ruang, Grid hanya menambah kerumitan yang tidak perlu.

Susun Atur Halaman Adalah Milik Grid

Di sinilah Grid mengambil alih. Ingat mimpi ngeri papan pemuka saya? Begini rupa struktur yang sepatutnya sejak awal:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}

.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }

Lihat apa yang berlaku. Bekas .page menetapkan tiga baris dan dua lajur. Baris pertama menetapkan saiznya mengikut apa sahaja yang terkandung dalam header terima kasih kepada auto. Baris tengah mengambil semua ruang baki yang ada dengan 1fr. Footer terletak di baris terakhir, mengikut saiz kandungannya sendiri. Sementara itu, bar sisi dikunci pada lebar 200 piksel, dan kawasan utama memenuhi selebihnya.

Logik penempatan adalah kelegaan yang sebenar. Header merentasi dari garisan lajur 1 ke garisan -1, yang bermaksud ia meregang merentasi kedua-dua lajur tidak kira berapa banyak lajur yang anda tambah kemudian. Bar sisi dan kandungan utama berkongsi baris 2 tetapi menduduki lajur yang berbeza. Footer kembali ke lebar penuh di baris 3. Anda tidak memerlukan pengiraan peratusan pada elemen anak. Anda tidak memerlukan pembungkus bersarang yang berebut ketinggian. Tukar lebar bar sisi di satu tempat, dan kawasan utama akan melaras secara automatik. Keseluruhan susun atur bernafas sebagai satu sistem tunggal.

Kebolehbacaan Dengan grid-template-areas

Untuk lebih kejelasan, anda boleh menamakan bahagian anda. Daripada menguruskan nombor garisan, anda menulis peta visual:

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }

Kini helaian gaya anda terbaca seperti rangka kerja (wireframe). Jika anda mahu bar sisi muncul di sebelah kanan untuk breakpoint yang berbeza, anda hanya perlu menukar dua perkataan dalam rentetan templat tersebut. Tahap kebolehbacaan struktur sedemikian mustahil untuk dicapai di dalam timbunan bekas flex yang bersarang.

Dua Pengajaran Sukar

Grid bukanlah magis. Terdapat dua kesilapan yang akan merosakkan susun atur anda dengan cepat.

Yang pertama ialah penggunaan unit yang tidak teratur. Jika anda menetapkan grid-template-columns: 1fr 1fr 1fr tetapi reka bentuk anda hanya memerlukan dua lajur kandungan, trek ketiga itu tetap wujud. Ia sama ada akan dibiarkan kosong dan mewujudkan jurang yang tidak anda jangkakan, atau ia akan memaksa kandungan sebenar anda terhimpit dengan cara yang merosakkan reka bentuk anda. Rancanglah dengan teliti. Apabila anda maksudkan dua lajur, tulis repeat(2, 1fr).