ป้องกันเนื้อหาไม่ให้ขยายรายการในกริด

TL; DR:มีอะไรที่เหมือนกับtable-layout: fixedCSS กริดหรือไม่

ฉันพยายามสร้างปฏิทินมุมมองรายปีด้วยตารางขนาดใหญ่ 4x3 ตารางในเดือนนั้นและซ้อนกัน 7x6 กริดสำหรับวันนั้น

ปฏิทินควรเติมหน้าดังนั้นคอนเทนเนอร์กริดของปีจะได้รับความกว้างและความสูง 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);
}

นี่คือตัวอย่างการทำงาน: https://codepen.io/loilo/full/ryXLpO/

เพื่อความเรียบง่ายปากกาทุกเดือนมี 31 วันและเริ่มในวันจันทร์

ฉันยังเลือกขนาดตัวอักษรที่เล็กเพื่อแสดงให้เห็นถึงปัญหา:

รายการกริด (= เซลล์วัน) จะค่อนข้างข้นเนื่องจากมีหลายร้อยรายการในหน้า และทันทีที่ป้ายหมายเลขวันมีขนาดใหญ่เกินไป (อย่าลังเลที่จะเล่นด้วยขนาดตัวอักษรในปากกาโดยใช้ปุ่มที่ด้านซ้ายบน) ตารางจะขยายขนาดและเกินขนาดของหน้ากระดาษ

มีวิธีป้องกันพฤติกรรมนี้หรือไม่?

เริ่มแรกฉันประกาศกริดปีของฉันให้มีความกว้างและความสูง 100% ดังนั้นนั่นอาจเป็นจุดเริ่มต้น แต่ฉันไม่สามารถหาคุณสมบัติ CSS ที่เกี่ยวข้องกับกริดที่ต้องการได้

ข้อจำกัดความรับผิดชอบ:ฉันทราบว่ามีวิธีการง่ายๆในการจัดรูปแบบปฏิทินโดยไม่ต้องใช้ CSS Grid Layout อย่างไรก็ตามคำถามนี้เกี่ยวกับความรู้ทั่วไปในหัวข้อมากกว่าการแก้ไขตัวอย่างที่เป็นรูปธรรม

ตามค่าเริ่มต้นรายการกริดจะต้องไม่เล็กกว่าขนาดของเนื้อหา

รายการตารางมีขนาดเริ่มต้นและmin-width: automin-height: auto

คุณสามารถแทนที่พฤติกรรมนี้โดยการตั้งค่ารายการตารางเพื่อmin-width: 0, min-height: 0หรือoverflowมีค่าอื่น ๆ visibleกว่าใด

จากสเป็ค:

6.6 ขนาดขั้นต่ำอัตโนมัติของรายการกริด

เพื่อให้มีขนาดต่ำสุดเริ่มต้นที่เหมาะสมมากขึ้นสำหรับรายการตารางข้อกำหนดนี้กำหนดว่าautoค่าของmin-width/ min-heightยังใช้ขนาดต่ำสุดอัตโนมัติในแกนที่ระบุไปยังรายการที่มีตารางเป็นoverflow visible(เอฟเฟ็กต์นั้นคล้ายคลึงกับขนาดต่ำสุดอัตโนมัติที่กำหนดในรายการเฟล็กซ์)

ต่อไปนี้เป็นคำอธิบายโดยละเอียดเพิ่มเติมเกี่ยวกับรายการเฟล็กซ์ แต่ใช้กับรายการกริดเช่นกัน:

• เหตุใดจึงไม่ยืดหยุ่นไอเท็มลดขนาดเนื้อหาที่ผ่านมา

โพสต์นี้ยังครอบคลุมถึงปัญหาที่อาจเกิดกับตู้คอนเทนเนอร์ซ้อนกันและเป็นที่รู้จักความแตกต่างของการแสดงผลในหมู่เบราว์เซอร์ที่สำคัญ

ในการแก้ไขเลย์เอาต์ของคุณทำการปรับเปลี่ยนรหัสเหล่านี้:

.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

1fr VS minmax(0, 1fr)

การแก้ปัญหาข้างต้นทำงานที่ระดับรายการกริด สำหรับการแก้ปัญหาระดับภาชนะดูโพสต์นี้:

• minmax (0, 1fr) มาได้อย่างไรสำหรับองค์ประกอบที่ยาวขณะที่ 1fr ไม่ได้

คำตอบก่อนหน้านี้เป็นรักที่ดี แต่ผมก็อยากจะพูดถึงว่ามีเป็นเทียบเท่ารูปแบบคงที่สำหรับร่อน, คุณเพียงแค่ต้องเขียนminmax(0, 1fr)แทน1frขนาดการติดตามของคุณ

คำตอบที่มีอยู่แก้ปัญหากรณีส่วนใหญ่ overflow: visibleแต่ผมวิ่งเข้าไปในกรณีที่ผมจำเป็นต้องมีเนื้อหาของตารางเซลล์ที่จะเป็น ฉันแก้ไขมันโดยการวางตำแหน่งอย่างภายในเสื้อคลุม (ไม่เหมาะ แต่ฉันดีที่สุดที่รู้) เช่นนี้

.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

สิ่งที่ง่ายกว่าที่จะทำเพื่อตั้งค่าความกว้างสูงสุดของรายการกริดเช่น:

//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
  }