Menjelajahi Kekuatan Grid dan Penempatan Otomatis Grid CSS

Saat bekerja dengan CSS Grid, hal pertama yang harus dilakukan adalah mengatur display: grid pada elemen yang ingin kita jadikan wadah grid. Kemudian kita secara eksplisit mendefinisikan grid menggunakan kombinasi dari grid-template-columns, grid-template-rows, dan grid-template-areas. Dan dari sana, langkah selanjutnya adalah menempatkan item di dalam grid.

Ini adalah pendekatan klasik yang harus digunakan dan saya juga merekomendasikannya. Namun, ada pendekatan lain untuk membuat grid tanpa definisi eksplisit. Kami menyebutnya kisi implisit.

“Eksplisit, implisit? Apa yang terjadi di sini?”

Istilah yang aneh bukan? Manuel Matuzovic sudah memiliki penjelasan yang bagus dari apa yang kita mungkin dengan "implisit" dan "eksplisit" di CSS Grid, tapi mari kita gali langsung ke itu specification mengatakan:

Grafik grid-template-rows, grid-template-columns, dan grid-template-areas properti menentukan jumlah trek yang tetap yang terbentuk kisi eksplisit. Saat item kisi diposisikan di luar batas ini, wadah kisi menghasilkan trek kisi implisit dengan menambahkan garis kisi implisit ke kisi. Garis-garis ini bersama-sama dengan bentuk grid eksplisit kisi implisit.

Jadi, dalam bahasa Inggris biasa, browser secara otomatis menghasilkan baris dan kolom tambahan jika ada elemen yang ditempatkan di luar kisi yang ditentukan.

Bagaimana dengan penempatan otomatis?

Mirip dengan konsep grid implisit, penempatan otomatis adalah kemampuan browser untuk secara otomatis menempatkan item di dalam kisi. Kita tidak selalu harus memberikan posisi setiap item.

Melalui kasus penggunaan yang berbeda, kita akan melihat bagaimana fitur tersebut dapat membantu kita membuat grid yang kompleks dan dinamis dengan beberapa baris kode.

Bilah sisi dinamis

Di sini, kami memiliki tiga tata letak yang berbeda tetapi kami hanya memiliki satu konfigurasi kisi yang berfungsi untuk semuanya.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Hanya satu kolom yang mengambil semua ruang kosong. Ini adalah grid "eksplisit" kami. Ini diatur agar sesuai dengan satu item kisi di main wadah kisi. Itu saja. Satu kolom dan satu baris:

Tapi bagaimana jika kita memutuskan untuk menjatuhkan elemen lain di sana, katakan aside (bilah sisi dinamis kami). Seperti yang saat ini (dan secara eksplisit) didefinisikan, grid kita harus menyesuaikan secara otomatis untuk menemukan tempat untuk elemen tersebut. Dan jika kita tidak melakukan hal lain dengan CSS kita, inilah yang dikatakan DevTools sedang terjadi.

Kita bisa memindahkan <aside> ke kolom di samping <section>:

aside {
  grid-column-start: 2;
}

Dan inilah yang dikatakan DevTools kepada kita sekarang:

Kami menempatkan elemen kami di kolom kedua tapi ... kami tidak memiliki kolom kedua. Aneh, kan? Kami tidak pernah mendeklarasikan kolom kedua di <main> wadah grid, tetapi browser membuatnya untuk kita! Ini adalah bagian penting dari spesifikasi yang kami lihat:

Saat item kisi diposisikan di luar batas ini, wadah kisi menghasilkan trek kisi implisit dengan menambahkan garis kisi implisit ke kisi.

Fitur canggih ini memungkinkan kita untuk memiliki tata letak yang dinamis. Jika kita hanya memiliki <section> elemen, yang kita dapatkan hanyalah satu kolom. Tetapi jika kita menambahkan <aside> elemen campuran, kolom tambahan dibuat untuk menampungnya.

Kita bisa menempatkan <aside> sebelum <section> sebagai gantinya seperti ini:

aside {
  grid-column-end: -2;
} 

Ini membuat kolom implisit di awal kisi, tidak seperti kode sebelumnya yang menempatkan kolom implisit di akhir.

Kita dapat melakukan hal yang sama dengan lebih mudah menggunakan grid-auto-flow properti untuk mengatur setiap dan semua trek implisit mengalir dalam a column arah:

Sekarang tidak perlu ditentukan grid-column-start untuk menempatkan <aside> elemen di sebelah kanan <section>! Faktanya, setiap item grid lain yang kami putuskan untuk dimasukkan ke sana kapan saja sekarang akan mengalir ke arah kolom, masing-masing ditempatkan di trek grid implisitnya sendiri. Sempurna untuk situasi di mana jumlah item dalam kisi tidak diketahui sebelumnya!

Yang mengatakan, kita masih membutuhkan grid-column-end jika kita ingin menempatkannya di kolom di sebelah kirinya karena, jika tidak, <aside> akan menempati kolom eksplisit yang, pada gilirannya, mendorong <section> di luar grid eksplisit dan memaksanya untuk mengambil kolom implisit.

Saya tahu saya tahu. Itu sedikit berbelit-belit. Berikut adalah contoh lain yang dapat kita gunakan untuk lebih memahami kekhasan kecil ini:

Pada contoh pertama, kami tidak menentukan penempatan apa pun. Dalam hal ini, browser pertama-tama akan menempatkan <aside> elemen di kolom eksplisit karena muncul pertama kali di DOM. Itu <section>, sementara itu, secara otomatis ditempatkan di kolom kisi yang dibuat oleh browser secara otomatis (atau implisit) untuk kita.

Pada contoh kedua, kami menetapkan <aside> elemen di luar kisi eksplisit:

aside {
  grid-column-end: -2;
}

Sekarang tidak masalah itu <aside> datang pertama dalam HTML. Dengan menugaskan kembali <aside> di tempat lain, kami telah membuat <section> elemen yang tersedia untuk mengambil kolom eksplisit.

kisi gambar

Mari kita coba sesuatu yang berbeda dengan kisi-kisi gambar di mana kita memiliki gambar besar dan beberapa thumbnail di sampingnya (atau di bawahnya).

Kami memiliki dua konfigurasi grid. Tapi coba tebak? Saya tidak mendefinisikan grid sama sekali! Yang saya lakukan hanyalah ini:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Ini mengejutkan kita hanya perlu satu baris kode untuk melakukan sesuatu seperti ini, jadi mari kita membedah apa yang terjadi dan Anda akan melihat bahwa itu lebih mudah daripada yang Anda pikirkan. Pertama, grid-area adalah properti singkatan yang menggabungkan properti berikut menjadi satu deklarasi:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Tunggu! Bukankah grid-area properti yang kita gunakan untuk mendefinisikan daerah bernama alih-alih di mana elemen mulai dan berakhir di kisi?

Ya, tetapi juga melakukan lebih banyak. Kita bisa menulis lebih banyak tentang grid-area, tetapi dalam kasus khusus ini:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Kita dapat melihat hal yang sama saat membuka DevTools untuk memperluas versi singkatan:

Ini berarti bahwa elemen gambar pertama dalam kisi perlu dibentang tiga kolom dan tiga baris. Tetapi karena kami tidak mendefinisikan kolom atau baris apa pun, browser melakukannya untuk kami.

Kami pada dasarnya telah menempatkan gambar pertama di HTML untuk mengambil kisi 3⨉3. Itu berarti bahwa gambar lain akan ditempatkan secara otomatis di tiga kolom yang sama tanpa perlu menentukan sesuatu yang baru.

Untuk meringkas, kami memberi tahu browser bahwa gambar pertama membutuhkan ruang tiga kolom dan tiga baris yang tidak pernah kami definisikan secara eksplisit saat menyiapkan wadah kisi. Peramban mengatur kolom dan baris itu untuk kita. Hasil dari, gambar yang tersisa dalam aliran HTML langsung ke tempatnya menggunakan tiga kolom dan baris yang sama. Dan karena gambar pertama mengambil ketiga kolom di baris pertama, gambar yang tersisa mengalir ke baris tambahan yang masing-masing berisi tiga kolom, di mana setiap gambar menempati satu kolom.

Semua ini dari satu baris CSS! Itulah kekuatan grid "implisit" dan penempatan otomatis.

Untuk konfigurasi grid kedua dalam demo itu, yang saya lakukan hanyalah mengubah arah aliran otomatis menggunakan grid-auto-flow: column cara yang sama yang kita lakukan sebelumnya saat menempatkan <aside> elemen di sebelah a <section>. Ini memaksa browser untuk membuat keempat kolom yang dapat digunakan untuk menempatkan gambar yang tersisa. Dan karena kami memiliki tiga baris, gambar yang tersisa ditempatkan di dalam kolom vertikal yang sama.

Kita perlu menambahkan beberapa properti ke gambar untuk memastikan mereka cocok dengan baik di dalam grid tanpa overflow:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Dan tentu saja, kita dapat dengan mudah memperbarui kisi untuk mempertimbangkan lebih banyak gambar dengan menyesuaikan satu nilai. Itu akan menjadi 3 dalam gaya untuk gambar besar. Kami memiliki ini:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Tapi kita bisa menambahkan kolom keempat hanya dengan mengubahnya menjadi 4 sebagai gantinya:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Lebih baik lagi: mari kita atur itu sebagai properti khusus untuk mempermudah pembaruan.

Tata letak dinamis

Kasus penggunaan pertama dengan bilah sisi adalah tata letak dinamis pertama kami. Sekarang kita akan menangani tata letak yang lebih kompleks di mana jumlah elemen akan menentukan konfigurasi grid.

Dalam contoh ini, kita dapat memiliki satu hingga empat elemen di mana kisi menyesuaikan dengan cara yang sesuai dengan jumlah elemen tanpa meninggalkan celah canggung atau ruang yang hilang.

Ketika kita memiliki satu elemen, kita tidak melakukan apa-apa. Elemen akan meregang untuk mengisi satu-satunya baris dan kolom yang dibuat secara otomatis oleh kisi.

Sedikit ketika kami menambahkan elemen kedua, kami membuat kolom (implisit) lain menggunakan grid-column-start: 2.

Saat kita menambahkan elemen ketiga, itu harus mengambil lebar dua kolom — itu sebabnya kami menggunakan grid-column-start: span 2, tetapi hanya jika itu :last-child karena jika (dan ketika) kita menambahkan elemen keempat, elemen itu hanya akan mengambil satu kolom.

Menambahkan itu, kita punya empat konfigurasi grid dengan hanya dua deklarasi dan keajaiban grid implisit:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Mari kita coba yang lain:

Kami tidak melakukan apa pun untuk kasus pertama dan kedua di mana kami hanya memiliki satu atau dua elemen. Namun, ketika kami menambahkan elemen ketiga, kami memberi tahu browser bahwa — selama itu adalah :last-child — itu harus mencakup dua kolom. Saat kami menambahkan elemen keempat, kami memberi tahu browser bahwa elemen perlu ditempatkan di kolom kedua.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Apakah Anda mulai mendapatkan triknya? Kami memberikan instruksi khusus browser berdasarkan jumlah elemen (menggunakan :nth-child) dan, terkadang, satu instruksi dapat mengubah tata letak sepenuhnya.

Perlu dicatat bahwa ukurannya tidak akan sama ketika kami bekerja dengan konten yang berbeda:

Karena kami tidak menentukan ukuran apa pun untuk item kami, browser secara otomatis mengukurnya untuk kami berdasarkan kontennya dan kami mungkin mendapatkan ukuran yang berbeda dari apa yang baru saja kami lihat. Untuk mengatasinya, kita harus secara eksplisit tentukan bahwa semua kolom dan baris berukuran sama:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Hei, kami belum bermain dengan properti itu! grid-auto-rows dan grid-auto-columns atur ukuran baris dan kolom implisit, masing-masing, dalam wadah kisi. Atau, sebagai spesifikasi menjelaskannya:

Grafik grid-auto-columns dan grid-auto-rows properti menentukan ukuran trek yang tidak diberi ukuran oleh grid-template-rows or grid-template-columns.

Berikut adalah contoh lain di mana kita bisa naik hingga enam elemen. Kali ini saya akan membiarkan Anda membedah kodenya. Jangan khawatir, pemilih mungkin terlihat rumit tetapi logikanya cukup mudah.

Bahkan dengan enam elemen, kami hanya membutuhkan dua deklarasi. Bayangkan semua tata letak kompleks dan dinamis yang dapat kita capai dengan beberapa baris kode!

Apa yang terjadi dengan itu? grid-auto-rows dan mengapa dibutuhkan tiga nilai? Apakah kita mendefinisikan tiga baris?

Tidak, kami tidak mendefinisikan tiga baris. Tapi kita adalah mendefinisikan tiga nilai sebagai pola untuk baris implisit kita. Logikanya adalah sebagai berikut:

• Jika kita memiliki satu baris, itu akan mendapatkan ukuran dengan nilai pertama.
• Jika kita memiliki dua baris, baris pertama mendapat nilai pertama dan baris kedua mendapat nilai kedua.
• Jika kita memiliki tiga baris, tiga nilai akan digunakan.
• Jika kita memiliki empat baris (dan inilah bagian yang menarik), kita menggunakan tiga nilai untuk tiga baris pertama dan kita menggunakan kembali nilai pertama untuk baris keempat. Itu sebabnya ini semacam pola yang kami ulangi untuk mengukur semua baris implisit.
• Jika kita memiliki 100 baris, mereka akan berukuran tiga kali tiga untuk dimiliki 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, Dll

Berbeda grid-template-rows yang menentukan jumlah baris dan ukurannya, grid-auto-rows hanya ukuran baris yang mungkin dibuat di sepanjang jalan.

Jika kita kembali ke contoh kita, logikanya adalah memiliki ukuran yang sama ketika dua baris dibuat (kita akan menggunakan 2fr 2fr), tetapi jika baris ketiga dibuat, kami membuatnya sedikit lebih kecil.

Pola kisi

Untuk yang terakhir ini, kita akan berbicara tentang pola. Anda mungkin pernah melihat dua tata letak kolom di mana satu kolom lebih lebar dari yang lain, dan setiap baris mengganti penempatan kolom tersebut.

Tata letak semacam ini bisa jadi sulit dilakukan tanpa mengetahui persis berapa banyak konten yang sedang kita tangani, tetapi kekuatan penempatan otomatis CSS Grid membuatnya relatif mudah.

Intip kodenya. Ini mungkin terlihat rumit tetapi mari kita uraikan karena akhirnya cukup mudah.

Hal pertama yang harus dilakukan adalah mengidentifikasi polanya. Tanyakan pada diri Anda: "Setelah berapa banyak elemen yang harus diulangi polanya?" Dalam hal ini setelah setiap empat elemen. Jadi, mari kita lihat hanya menggunakan empat elemen untuk saat ini:

Sekarang, mari kita mendefinisikan grid dan mengatur pola umum menggunakan :nth-child pemilih untuk berganti-ganti antar elemen:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Kami mengatakan bahwa pola kami berulang setiap empat elemen, jadi kami secara logis akan menggunakan 4n + x dimana x berkisar dari 1 hingga 4. Sedikit lebih mudah untuk menjelaskan polanya dengan cara ini:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Sempurna, kan? Kami memiliki empat elemen, dan ulangi pola pada elemen kelima, elemen kesembilan dan seterusnya.

Itu :nth-child pemilih bisa rumit! Chris memiliki super membantu penjelasan tentang cara kerjanya, termasuk resep untuk membuat pola yang berbeda.

Sekarang kita mengkonfigurasi setiap elemen sehingga:

1. Elemen pertama perlu mengambil dua kolom dan mulai dari kolom satu (grid-column: 1/span 2).
2. Elemen kedua ditempatkan di kolom ketiga (grid-column-start: 3).
3. Elemen ketiga ditempatkan di kolom pertama: (grid-column-start: 1).
4. Elemen keempat mengambil dua kolom dan dimulai pada kolom kedua: (grid-column: 2/span 2).

Di sini yang ada di CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Kita bisa berhenti di sini dan selesai… tapi kita bisa melakukan yang lebih baik! Secara khusus, kami dapat menghapus beberapa deklarasi dan mengandalkan kekuatan penempatan otomatis grid untuk melakukan pekerjaan untuk kami. Ini adalah bagian tersulit dari grok dan membutuhkan banyak latihan untuk dapat mengidentifikasi apa yang bisa dihilangkan.

Hal pertama yang bisa kita lakukan adalah memperbarui grid-column: 1 /span 2 dan gunakan saja grid-column: span 2 karena, secara default, browser akan menempatkan item pertama ke dalam kolom pertama. Kami juga dapat menghapus ini:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Dengan menempatkan item pertama, kedua, dan keempat, grid secara otomatis menempatkan item ketiga di tempat yang benar. Itu berarti kita dibiarkan dengan ini:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Tapi ayolah kita bisa berjalan-jalan lebih baik! Kami juga dapat menghapus ini:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Mengapa? Jika kita menempatkan elemen keempat di kolom kedua sambil membiarkannya mengambil dua kolom penuh, kita memaksa kisi untuk membuat kolom implisit ketiga, memberi kita total tiga kolom tanpa secara eksplisit memerintahkannya. Elemen keempat tidak dapat masuk ke baris pertama karena item pertama juga mengambil dua kolom, sehingga mengalir ke baris berikutnya. Konfigurasi ini meninggalkan kita dengan kolom kosong di baris pertama dan yang kosong di baris kedua.

Saya pikir Anda tahu akhir cerita. Browser akan secara otomatis menempatkan item kedua dan ketiga di tempat kosong tersebut. Jadi kode kita menjadi lebih sederhana:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Yang diperlukan hanyalah lima deklarasi untuk membuat pola yang sangat keren dan sangat fleksibel. Bagian pengoptimalan mungkin rumit, tetapi Anda akan terbiasa dan mendapatkan beberapa trik dengan latihan.

Mengapa tidak menggunakan? grid-template-columns untuk mendefinisikan kolom eksplisit karena kita tahu jumlah kolom?

Kita bisa melakukannya! Berikut kode untuk itu:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Seperti yang Anda lihat, kodenya jelas lebih intuitif. Kami mendefinisikan tiga kolom kisi eksplisit dan kami memberi tahu browser bahwa elemen pertama dan keempat perlu mengambil dua kolom. Saya sangat merekomendasikan pendekatan ini! Tetapi tujuan artikel ini adalah untuk mengeksplorasi ide dan trik baru yang kami dapatkan dari kekuatan implisit dan penempatan otomatis CSS Grid.

Pendekatan eksplisit lebih mudah, sementara kisi implisit mengharuskan Anda untuk — maafkan permainan kata itu — mengisi celah di mana CSS melakukan pekerjaan tambahan di belakang layar. Pada akhirnya, saya percaya bahwa memiliki pemahaman yang kuat tentang grid implisit akan membantu Anda lebih memahami algoritma CSS Grid. Lagi pula, kami di sini bukan untuk mempelajari apa yang sudah jelas — kami di sini untuk menjelajahi wilayah liar!

Mari kita coba pola lain, kali ini sedikit lebih cepat:

Pola kami berulang setiap enam elemen. Elemen ketiga dan keempat masing-masing harus menempati dua baris penuh. Jika kita menempatkan elemen ketiga dan keempat, sepertinya kita tidak perlu menyentuh yang lain, jadi mari kita coba yang berikut ini:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Hm, tidak bagus. Kita perlu menempatkan elemen kedua di kolom pertama. Jika tidak, grid akan secara otomatis menempatkannya di kolom kedua.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Lebih baik, tapi masih ada lebih banyak pekerjaan, Kita perlu menggeser elemen ketiga ke atas. Sangat menggoda untuk mencoba menempatkannya di baris pertama dengan cara ini:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Tapi ini tidak berhasil karena memaksa semua 6n + 3 elemen untuk ditempatkan di area yang sama yang membuat tata letak campur aduk. Solusi sebenarnya adalah mempertahankan definisi awal elemen ketiga dan menambahkan grid-auto-flow: dense untuk mengisi celah. Dari MDN:

[The] algoritma pengepakan "padat" mencoba untuk mengisi di lubang sebelumnya di grid, jika item yang lebih kecil muncul kemudian. Hal ini dapat menyebabkan item tampak rusak, saat melakukannya akan mengisi lubang yang ditinggalkan oleh item yang lebih besar. Jika dihilangkan, digunakan algoritma “sparse”, dimana algoritma penempatan hanya bergerak “maju” di grid saat menempatkan item, tidak pernah mundur untuk mengisi lubang. Ini memastikan bahwa semua item yang ditempatkan secara otomatis muncul "berurutan", bahkan jika ini meninggalkan lubang yang bisa diisi oleh item selanjutnya.

Saya tahu properti ini tidak terlalu intuitif tetapi jangan pernah melupakannya saat Anda menghadapi masalah penempatan. Sebelum mencoba konfigurasi yang berbeda dengan sia-sia, tambahkan karena dapat memperbaiki tata letak Anda tanpa usaha tambahan.

Mengapa tidak selalu menambahkan properti ini secara default?

Saya tidak merekomendasikannya karena, dalam beberapa kasus, kami tidak menginginkan perilaku itu. Perhatikan bagaimana penjelasan MDN di sana menyebutkan hal itu menyebabkan item mengalir "out-of-order" untuk mengisi lubang yang ditinggalkan oleh item yang lebih besar. Urutan visual biasanya sama pentingnya dengan urutan sumber, terutama dalam hal antarmuka yang dapat diakses, dan grid-auto-flow: dense terkadang dapat menyebabkan ketidakcocokan antara visual dan urutan sumber.

Kode terakhir kami adalah:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Yang lainnya? Ayo pergi!

Untuk yang satu ini, saya tidak akan banyak bicara dan malah menunjukkan ilustrasi kode yang saya gunakan. Coba lihat apakah Anda mengerti bagaimana saya mencapai kode itu:

Item berwarna hitam secara implisit ditempatkan di grid. Perlu dicatat bahwa kita bisa mendapatkan tata letak yang sama lebih banyak cara daripada bagaimana saya sampai di sana. Bisakah Anda mengetahuinya juga? Bagaimana dengan menggunakan? grid-template-columns? Bagikan karya Anda di kolom komentar.

Saya akan meninggalkan Anda dengan pola terakhir:

Saya lakukan punya solusi untuk yang satu ini tetapi giliran Anda untuk berlatih. Ambil semua yang telah kita pelajari dan coba buat kode ini sendiri lalu bandingkan dengan solusi saya. Jangan khawatir jika Anda mengakhiri dengan sesuatu yang bertele-tele — yang paling penting adalah menemukan solusi yang berhasil.

Ingin lebih?

Sebelum kita mengakhiri, saya ingin membagikan beberapa pertanyaan Stack Overflow terkait dengan CSS Grid di mana saya melompat dengan jawaban yang menggunakan banyak teknik yang kita bahas di sini bersama-sama. Ini adalah daftar bagus yang menunjukkan berapa banyak kasus penggunaan nyata dan situasi dunia nyata muncul di mana hal-hal ini berguna:

Membungkus

CSS Grid telah ada selama bertahun-tahun, tetapi masih banyak trik yang kurang dikenal dan digunakan yang tidak banyak dibahas. Fitur kisi implisit dan penempatan otomatis adalah dua di antaranya!

Dan ya, ini bisa jadi menantang! Butuh banyak waktu bagi saya untuk memahami logika di balik kisi implisit dan saya masih berjuang dengan penempatan otomatis. Jika Anda ingin menghabiskan lebih banyak waktu untuk membungkus kepala Anda di sekitar grid eksplisit dan implisit, berikut adalah beberapa penjelasan dan contoh tambahan yang patut dicoba:

Demikian pula, Anda mungkin ingin membaca tentang grid-auto-columns di CSS-Tricks Almanak karena Mojtaba Seyedi menjelaskan dengan sangat rinci dan menyertakan visual yang sangat membantu untuk membantu menjelaskan perilaku tersebut.

Seperti yang saya katakan saat kita mulai, metode yang kita bahas di sini tidak dimaksudkan untuk menggantikan cara umum yang sudah Anda ketahui untuk membangun kisi-kisi. Saya hanya menjelajahi berbagai cara yang dapat membantu dalam beberapa kasus.