Cegah konten agar tidak memperluas item kisi


153

TL; DR: Apakah ada sesuatu seperti table-layout: fixeduntuk grid CSS?


Saya mencoba membuat kalender tampilan tahun dengan kisi-kisi besar 4x3 selama berbulan-bulan dan di dalamnya bersarang kisi-kisi 7x6 selama berhari-hari.

Kalender harus mengisi halaman, sehingga wadah kotak tahun mendapat lebar dan tinggi masing-masing 100%.

.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 contoh yang berfungsi: https://codepen.io/loilo/full/ryXLpO/

Untuk mempermudah, setiap bulan dalam pena itu ada 31 hari dan dimulai pada hari Senin.

Saya juga memilih ukuran font yang sangat kecil untuk menunjukkan masalah:

Item kisi (= sel hari) cukup kental karena ada beberapa ratusan di halaman. Dan segera setelah label nomor hari menjadi terlalu besar (jangan ragu untuk bermain-main dengan ukuran font di pena menggunakan tombol di kiri atas) kotak hanya akan tumbuh dalam ukuran dan melebihi ukuran tubuh halaman.

Apakah ada cara untuk mencegah perilaku ini?

Saya awalnya menyatakan grid tahun saya menjadi 100% lebar dan tinggi sehingga mungkin titik untuk memulai, tapi saya tidak bisa menemukan properti CSS yang berhubungan dengan grid yang sudah cocok dengan kebutuhan itu.

Penafian: Saya sadar bahwa ada cara yang cukup mudah untuk men-style kalender itu tanpa menggunakan Layout Grid CSS. Namun, pertanyaan ini lebih tentang pengetahuan umum tentang topik daripada memecahkan contoh konkret.


Apa yang Anda inginkan terjadi? Font di masing-masing sel hanya ukuran apa saja dan tidak pernah menyebabkan ukuran sel jaringan meningkat?
Michael Coker

1
Persis. Pada dasarnya cara yang lebih nyaman dari apa yang akan terjadi jika saya mengatur ukuran item kisi sesuai dengan nilai persentase daripada fraksi.
Loilo

Saya pada dasarnya mencari versi grid-layouty dari tabel-layout: fixed (lihat: codepen.io/loilo/pen/dvxpvq?editors=1100 )
Loilo

7
Ini adalah rasa sakit terbesar di seluruh spesifikasi Grid CSS. Kebutuhan mereka untuk menjadi pengaturan di mana area kisi tidak dapat lepas dari dimensi wadah kisi induknya! Seperti, itu adalah mimpi buruk bagi struktur grid bersarang.
Lonnie Best

Jawaban:


263

Secara default, item kisi tidak boleh lebih kecil dari ukuran kontennya.

Item kisi memiliki ukuran awal min-width: autodan min-height: auto.

Anda bisa mengesampingkan perilaku ini dengan mengatur item kisi ke min-width: 0, min-height: 0atau overflowdengan nilai apa pun selain visible.

Dari spec:

6.6. Otomatis Ukuran Minimum dari Item Kisi

Untuk memberikan ukuran minimum standar lebih masuk akal untuk item grid, spesifikasi ini mendefinisikan bahwa autonilai min-width/ min-heightjuga berlaku ukuran minimum otomatis dalam sumbu ditentukan untuk item jaringan yang overflowadalah visible. (Efeknya analog dengan ukuran minimum otomatis yang dikenakan pada item fleksibel.)

Berikut adalah penjelasan yang lebih terperinci yang mencakup item fleksibel, tetapi juga berlaku untuk item kisi, juga:

Posting ini juga mencakup masalah potensial dengan wadah bersarang dan perbedaan render yang diketahui di antara browser utama .


Untuk memperbaiki tata letak Anda, buat penyesuaian ini pada 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 */
}

codepen yang direvisi


1fr vs. minmax(0, 1fr)

Solusi di atas beroperasi pada level item grid. Untuk solusi level kontainer, lihat posting ini:


3
Wow. Itu menarik dan menarik pada saat yang sama, dan saya pasti tidak akan menemukan itu hanya dengan mencoba-coba. Apakah Anda hanya melihat sekilas spesifikasi untuk informasi itu? Karena setelah tidak tahu untuk apa google, itulah yang saya coba sebelumnya, tetapi saya akhirnya membaca bagian yang salah (setelah menyimpulkan penyebab masalah yang salah).
Loilo

1
Saya pernah mengalami masalah ini sebelumnya dengan item fleksibel . Menjadi bahwa ada banyak kesamaan antara item fleksibel dan kotak, saya pikir perilaku mungkin sama dan memusatkan perhatian pada bagian spesifikasi tersebut.
Michael Benjamin

1
Ini memperbaiki ketinggian, tetapi terus tumbuh ke arah horisontal, min-width: 0;tidak membantu. Apakah saya melewatkan sesuatu?
pengguna

2
Untuk kisi-kisi bersarang kita perlu menerapkan ini ke semua tingkatan. Tapi saya benar-benar datang ke sini untuk mendukung dan mengucapkan terima kasih ..
Knack


57

Jawaban sebelumnya cukup bagus, tapi saya juga ingin menyebutkan bahwa ada adalah tata letak setara tetap untuk grid, Anda hanya perlu menulis minmax(0, 1fr)bukan 1frsebagai ukuran trek Anda.


6
Saya merekomendasikan pendekatan ini daripada jawaban yang diterima sebelumnya.
Thierry Prost

Meskipun ini berhasil, saya tidak mengerti sedikitpun ... Bisakah Anda menjelaskan mengapa ini berhasil? Apa yang sedang dilakukan minmax (0, 1fr)? Haruskah itu tidak selalu 0? Saya bingung :(
BAERUS

2
minmax(0, 1fr)berfungsi karena 1frbenar-benar merupakan singkatan untuk minmax(auto,1fr), yang bukan nilai yang benar untuk pertanyaan awal.
Mikko Rantalainen


1

Jawaban yang ada memecahkan sebagian besar kasus. Namun, saya mengalami kasus di mana saya membutuhkan konten sel-grid overflow: visible. Saya menyelesaikannya dengan benar-benar memposisikan dalam pembungkus (tidak ideal, tetapi yang terbaik yang saya tahu), seperti ini:


.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv


0

hal yang lebih mudah untuk dilakukan adalah mengatur lebar item kisi item seperti:

//for the container
.gridContainer{
    display: grid;
    grids-templates-column: repeat (12, 1fr);
 }

 //for the grid item
 .gridItem{
       max-width: 100%;
       grid-column: span 4  //4 can be any number from1-12 as we specified in the grid template
  }

Saya sedikit bingung untuk jujur. Kode Anda sama sekali tidak mirip dengan pertanyaan awal, dan menerapkan lebar maks: 100% ke item kisi (bukan lebar minimum: 0 dari solusi yang diterima) tidak akan menyelesaikan masalah ...
Loilo

max-width akan mencegahnya menyesuaikan kembali dengan lebar anaknya
Pedro JR

Saya telah mencoba mereproduksi kode Anda, dan itu benar-benar berfungsi, tetapi sepertinya bukan karena max-width: 100% tetapi karena kolom-grid: span 4; tanpa mendefinisikan kolom awal. Tentukan kolom awal (misalnya dengan menggunakan kolom-kotak: 1 / rentang 4;) dan itu akan merusak tata letak lagi. (Perilaku itu agak aneh, tapi saya yakin ada sudut di suatu tempat di mana spesifikasi ini didefinisikan.)
Loilo

baiklah, kedengarannya bagus. tetapi Anda belum mempertimbangkan untuk mendukung saya
Pedro JR

Jujur terus terang: 1. Ini telah menjadi masalah yang dipecahkan selama lebih dari tiga tahun. 2. jawaban Anda tidak diuji dengan benar (CSS Anda berisi beberapa kesalahan ketik yang perlu diperbaiki sebelum browser mengenali kisi Anda). Dan 3. jawaban Anda tidak benar-benar memenuhi contoh dalam pertanyaan saya (jika tidak, Anda akan menyadari bahwa solusi Anda tidak berhasil dengannya). - Jadi tidak, saya minta maaf, tapi saya tidak mempertimbangkan upvote.
Loilo
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.