Mencegah konten dari jaringan berkembang item
TL;DR: apakah ada sesuatu Yang seperti table-layout: fixed untuk CSS grid?
Saya mencoba untuk membuat tahun-lihat kalender dengan besar 4x3 grid untuk bulan dan di dalamnya bersarang 7x6 grid untuk hari-hari.
Kalender harus mengisi halaman, sehingga tahun grid wadah mendapat lebar dan tinggi 100% masing-masing.
.year-grid {
width: 100%;
height: 100%;
display: grid;
grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}Berikut ini's contoh kerja: https://codepen.io/loilo/full/ryXLpO/
Untuk kesederhanaan, setiap bulan dalam pena itu ada 31 hari dan dimulai pada hari senin.
Saya juga memilih ridiculously kecil ukuran font untuk menunjukkan masalah:
Grid item (= hari sel-sel) yang cukup kental karena ada beberapa ratusan dari mereka di halaman. Dan segera setelah hari jumlah label menjadi terlalu besar (merasa bebas untuk bermain-main dengan font ukuran dalam pen menggunakan tombol di kiri atas) grid hanya akan tumbuh dalam ukuran dan melebihi halaman's ukuran tubuh.
Apakah ada cara untuk mencegah perilaku ini?
Awalnya saya menyatakan saya tahun grid untuk menjadi 100% pada lebar dan tinggi sehingga's mungkin titik untuk mulai, tapi aku tidak't menemukan setiap grid yang berhubungan dengan properti CSS yang akan've dipasang yang membutuhkan.
Disclaimer: I'm menyadari bahwa ada cukup cara mudah untuk gaya yang kalender hanya tanpa menggunakan CSS Layout Grid. Namun, pertanyaan ini lebih tentang pengetahuan umum tentang topik dari pemecahan contoh konkret.
Secara default, kotak item tidak dapat menjadi ukuran yang lebih kecil daripada isinya.
Grid item memiliki ukuran awal min-width: auto dan min-height: auto.
Anda dapat mengubah perilaku ini dengan pengaturan grid item untuk min-width: 0, min-height: 0 atau overflow dengan nilai apapun selain terlihat.
Dari spec:
6.6. Otomatis Ukuran Minimum dari Grid Item
Untuk memberikan yang lebih masuk akal default ukuran minimum untuk item kotak, ini spesifikasi mendefinisikan bahwa
autonilaimin-width/min-heightjuga berlaku otomatis ukuran minimum yang di tentukan sumbu untuk grid item yangmelimpahlebihterlihat. (Efek ini analog dengan otomatis ukuran minimum yang dikenakan pada flex item.)
Berikut ini's penjelasan yang lebih rinci meliputi flex item, tapi itu berlaku untuk item kotak, serta:
Posting ini juga mencakup masalah-masalah potensial dengan bersarang di wadah dan diketahui rendering perbedaan antara browser utama.
Untuk memperbaiki dan memperbaiki tata letak anda, membuat penyesuaian untuk kode anda:
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
.day-item {
padding: 10px;
background: #DFE7E7;
overflow: hidden; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}1fr vs minmax(0, 1fr)
Solusi di atas beroperasi pada grid item tingkat. Untuk wadah solusi tingkat, lihat posting ini:
Jawaban sebelumnya cukup baik, tapi saya juga ingin menyebutkan bahwa ada adalah tata letak tetap setara untuk grid, anda hanya perlu menulis minmax(0, 1fr) bukan 1fr seperti yang anda melacak ukuran.
Ada jawaban memecahkan banyak kasus. Namun, aku berlari ke kasus di mana saya dibutuhkan isi grid-cell untuk menjadi overflow: visible. Aku soal itu dengan benar-benar dalam posisi pembungkus (tidak ideal, tapi yang terbaik yang saya tahu), seperti ini:
``
.bulan-grid { tampilan: grid; grid template: mengulang(6, 1fr) / ulangi(7, 1fr); background: #fff; grid-gap: 2px; }
.hari-item-wrapper { position: relative; }
.hari-item { position: absolute; top: 0; kiri: 0; kanan: 0; bottom: 0; padding: 10px;
latar belakang: rgba(0,0,0,0.1); } `` https://codepen.io/bjnsn/pen/vYYVPZv
