[ad_1]
https://www.youtube.com/watch?v=Khk0mmylnea
Mari kita buat tata letak menggunakan subgrid. Masih agak baru pada saat penulisan artikel ini dan belum didukung di semua browser utama, salah satu fitur baru yang saat ini sedang diimplementasikan dengan dalam modul tata letak CSS Grid adalah subgrid. Gambar 1 menunjukkan dukungan browser saat ini untuk subgrid.
Tapi pertama -tama, fungsionalitas apa yang dibawa oleh subgrid yang sebelumnya tidak tersedia di grid? Apa yang dilakukan Subgrid adalah memungkinkan elemen anak dapat menggunakan trek yang dibuat pada elemen induknya. Dengan kata lain, elemen anak beroperasi pada baris dan kolom orang tua mereka yang memungkinkan kami untuk menyelaraskan elemen kami dengan lebih rapi. Mari kita lihat bagaimana ini bekerja dalam praktik.
Subgrid
Kami akan menggunakan subgrid untuk tata letak daftar 4 proyek yang ditemukan dalam daftar bahwa masing -masing memiliki gambar, nama, deskripsi, dan tautan dalam tata letak 4 kolom. HTML kami terlihat sebagai berikut (Listing 1):
<section class="projects">
<h2>My Projects</h2>
<ul>
<li>
<img src="https://ignitioncms.com/img/ignition-light.svg" alt="Ignition Logo" title="Ignition" height="100">
<h3>Ignition CMS</h3>
<div class="content">
<p>Ignition is a headless CMS...</p>
</div>
<a href="https://ignitioncms.com" target="_blank" rel="noopener">Check out Ignition CMS</a>
</li>
...
</ul>
</section>
Dan halaman web kami terlihat seperti terlihat pada Gambar 2.
Kami mulai dengan memberikan daftar kami display nilai properti dari grid dan mendefinisikan 4 kolom (satu untuk setiap proyek). Karena kami ingin semua 4 kolom menjadi lebar yang sama yang kami gunakan repeat()yang memungkinkan kita untuk menentukan jumlah kolom yang akan dibuat untuk dimensi yang ditentukan. Kami juga menghapus gaya daftar dan bantalan default dari daftar. Oleh karena itu, CSS kami terlihat sebagai berikut (Listing 2).
.projects ul {
list-style-type: none; /* remove list style (bullet points) */
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
Sekarang setelah kita memiliki kolom (Gambar 3) kita dapat mulai fokus pada elemen individual yang ditemukan dalam setiap proyek (gambar, nama, deskripsi, dan daftar).
Perhatikan bahwa nama proyek dan deskripsi tidak memiliki panjang yang sama. (Ya, karakter ekstra di akhir proyek kedua – Cirrostyle – bukan pengawasan, mereka ada di sana untuk membuat judul bungkus). Yang ingin kami lakukan adalah memiliki setiap jenis konten yang disejajarkan secara horizontal. Kami akan menggunakan subgrid untuk mencapai ini.
Itu subgrid Nilai properti ditetapkan untuk salah satunya grid-template-columns, grid-template-rowsatau keduanya. Dalam kasus kami, karena kami mencari perataan horizontal, kami akan menggunakannya grid-template-rows. Perhatikan bahwa kita masih perlu memberikan proyek (<li>) nilai tampilan grid (Daftar 3).
.projects ul li {
display: grid;
grid-template-rows: subgrid;
}
Pada saat ini setelah menerapkan properti ini, kami tidak akan melihat semua konten kami sekarang ditemukan di baris pertama seperti yang terlihat pada Gambar 3.
Mari kita lanjutkan dan tentukan baris kita. Ini akan dilakukan pada orang tua ( <ul>). Kami akan memberikan setiap baris nilai berikut:
- Baris pertama (gambar):
100px - Baris Kedua (Nama Proyek):
max-content - Baris ketiga (deskripsi):
auto - Baris keempat (tautan):
max-content
Daftar CSS kami yang diperbarui akan terlihat sebagai berikut (Listing 4):
.projects ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: 100px max-content auto max-content;
}
Meskipun kami mendefinisikan baris kami, kami dapat melihat bahwa konten kami masih ditemukan di baris pertama (Gambar 5). Baris sekarang lebih kecil, tetapi elemen individual proyek belum didistribusikan di seluruh baris yang baru dibuat.
Bahkan jika kami secara eksplisit menetapkan baris ke setiap elemen proyek individu (Listing 5) kami menemukan bahwa konten kami tetap terjebak di baris pertama (Gambar 6).
.projects ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: 100px max-content auto max-content;
}
Alasan elemen konten proyek berpegang pada baris pertama itu adalah karena kami belum menetapkan nilai baris untuk proyek itu sendiri (<li>). Kecuali ditentukan lain, secara default elemen akan memakan ruang 1 sel (baik secara horizontal maupun vertikal). Kami membutuhkan kami <li> elemen untuk menjangkau 4 baris. Ini akan membuat baris yang tersedia untuk subgrid dan konten proyek akan dapat menyelaraskan dengan benar. Setelah kami memperbarui kami <li>(Listing 5) kita melihat bahwa elemen proyek kami jatuh (Gambar 7).
.projects ul li {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / 5;
}
Dengan konten kami di baris yang benar, mari kita lakukan sedikit pembersihan. Gambar kami meluas melewati lebar kolom dan menyebabkan beberapa luapan. Untuk memperbaikinya, kami akan memberikan gambar kami a max-width dari 100%.
Kami juga akan menambahkan beberapa ruang di antara kolom kami menggunakan gap milik. Meskipun kami ingin menambahkan ruang di antara kolom, kami tidak ingin menambahkan apa pun di antara baris. Karena itu kami menetapkan 2 nilai untuk deklarasi kami. Yang pertama 0 (row-gap) dan yang kedua 2rem (column-gap). Listing 7 menunjukkan CSS kami yang diperbarui dan Gambar 8 Kemajuan kami sejauh ini. Perhatikan bahwa gap Deklarasi ditambahkan ke daftar, bukan proyek individu.
.projects ul li img {
grid-row: 1;
max-width: 100%; /* constrains image width */
}
.projects ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: 100px max-content auto max-content;
gap: 0 2rem; /* gap between the columns but not the rows */
}
Mari kita menaruh beberapa sentuhan akhir pada tata letak kami. Kami akan memusatkan gambar secara horizontal di tengah kolom mereka dan memusatkan nama -nama proyek secara vertikal di tengah baris mereka. Mari kita mulai dengan gambar. Untuk memusatkan gambar secara horizontal yang akan kami gunakan justify-self dengan nilai center. Untuk berpusat pada memproyeksikan nama secara vertikal, kami menggunakan align-self juga dengan nilai center Seperti yang terlihat di Listing 8.
.projects ul li img {
grid-row: 1;
max-width: 100%;
justify-self: center; /* horizontal alignment */
}
.projects ul li h3 {
grid-row: 2;
align-self: center; /* vertical alignment */
}
Dengan penyesuaian akhir ini, tata letak kami terlihat cukup bagus (Gambar 9) tetapi mari kita lihat seperti apa penampilan kita di Chrome (Gambar 10). Spoiler, pada saat itu atau menulis artikel ini, Chrome belum mendukung subgrid.
Membuat mundur
Meskipun tata letak kami tidak terlihat mengerikan di Chrome, mari kita lanjutkan dan membuatnya sedikit lebih baik dengan menambahkan fallback. Kami akan menggunakan @supports At-aturan untuk memberikan solusi alternatif untuk browser yang belum mendukung subgrid. Dengan secara khusus menambahkan gaya bersyarat ke browser itu jangan Dukungan Subgrid, kami menciptakan situasi di mana ketika properti mendapatkan dukungan, kode kami akan secara otomatis mulai menggunakan solusi pilihan kami. Setelah properti mendapatkan dukungan luas, kami dapat dengan mudah menghapus at-aturan kami tanpa perlu menyentuh sisa kode kami.
Mari kita fokus menyelaraskan ajakan bertindak (tautan) kita di bagian bawah proyek. Proyek kami sudah memiliki file display nilai grid Jadi kami hanya akan memberikan dan nilai alternatif untuk kami grid-template-rows. Oleh karena itu, aturan kami terlihat sebagai berikut (Listing 10):
@supports not (grid-template-rows: subgrid) {
.projects > ul li {
grid-template-rows: 100px min-content auto min-content;
}
}
Meskipun bukan tata letak yang identik seperti di Firefox, dengan menambahkan fallback kami sekarang memiliki solusi kerja di Chrome yang akan “meningkatkan” itu sendiri untuk menggunakan subgrid setelah subgrid didukung oleh browser (Gambar 11).
Anda dapat menemukan versi yang berfungsi dari kode pada codepen di https://codepen.io/martine-dowden/pen/ylrawvp.
Happy Coding!
[ad_2]
Subgrid CSS | Blog | Solusi Galaksi Andromeda