Ngăn nội dung mở rộng các mục lưới

TL; DR: Có bất cứ điều gì giống như table-layout: fixedlưới CSS không?

Tôi đã cố gắng tạo ra một lịch xem năm với lưới 4x3 lớn trong nhiều tháng và ở đó các lưới 7x6 lồng nhau cho các ngày.

Lịch nên điền vào trang, vì vậy, thùng chứa lưới năm có chiều rộng và chiều cao 100% mỗi trang.

.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);
}

Đây là một ví dụ hoạt động: https://codepen.io/loilo/full/ryXLpO/

Để đơn giản, mỗi tháng trong cây bút đó có 31 ngày và bắt đầu vào thứ Hai.

Tôi cũng chọn một cỡ chữ nhỏ lố bịch để thể hiện vấn đề:

Các mục lưới (= ô ngày) khá cô đọng vì có hàng trăm trong số chúng trên trang. Và ngay khi nhãn số ngày trở nên quá lớn (hãy thoải mái chơi với kích thước phông chữ trong bút bằng các nút ở phía trên bên trái), lưới sẽ chỉ tăng kích thước và vượt quá kích thước cơ thể của trang.

Có cách nào để ngăn chặn hành vi này?

Ban đầu, tôi đã tuyên bố lưới năm của mình là 100% về chiều rộng và chiều cao để có thể là điểm bắt đầu, nhưng tôi không thể tìm thấy bất kỳ thuộc tính CSS nào liên quan đến lưới có thể cần.

Tuyên bố miễn trừ trách nhiệm: Tôi biết rằng có nhiều cách khá dễ dàng để định kiểu lịch đó mà không cần sử dụng CSS Grid Layout. Tuy nhiên, câu hỏi này là về kiến ​​thức chung về chủ đề hơn là giải quyết ví dụ cụ thể.

Theo mặc định, một mục lưới không thể nhỏ hơn kích thước của nội dung của nó.

Các mục lưới có kích thước ban đầu min-width: autovà min-height: auto.

Bạn có thể ghi đè lên hành vi này bằng cách thiết lập mục lưới min-width: 0, min-height: 0hoặc overflowvới bất kỳ giá trị khác hơn visible.

Từ thông số kỹ thuật:

6.6. Kích thước tối thiểu tự động của các mục lưới

Để cung cấp một kích thước tối thiểu mặc định hợp lý hơn cho các hạng mục lưới, đặc tả này định nghĩa rằng autogiá trị của min-width/ min-heightcũng áp dụng một kích thước tối thiểu tự động ở trên trục quy định để các mặt hàng lưới mà overflowlà visible. (Hiệu ứng này tương tự với kích thước tối thiểu tự động được áp dụng cho các mục flex.)

Đây là một lời giải thích chi tiết hơn bao gồm các mục flex, nhưng nó cũng áp dụng cho các mục lưới:

• Tại sao các mục flex không thu nhỏ kích thước nội dung trong quá khứ?

Bài đăng này cũng đề cập đến các vấn đề tiềm ẩn với các thùng chứa lồng nhau và sự khác biệt về kết xuất giữa các trình duyệt chính .

Để sửa bố cục của bạn, hãy thực hiện các điều chỉnh này cho mã của bạn:

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

sửa đổi codepen

1fr đấu với minmax(0, 1fr)

Các giải pháp trên hoạt động ở cấp độ mục lưới. Đối với một giải pháp cấp container, xem bài này:

• Làm thế nào đến minmax (0, 1fr) hoạt động cho các phần tử dài trong khi 1fr thì không?

Câu trả lời trước đó là khá tốt, nhưng tôi cũng muốn đề cập rằng có là một cách bố trí tương đương cố định dùng cho lưới, bạn chỉ cần phải viết minmax(0, 1fr)thay vì 1frnhư kích thước theo dõi của bạn.

Các câu trả lời hiện có giải quyết hầu hết các trường hợp. Tuy nhiên, tôi gặp phải trường hợp tôi cần nội dung của ô lưới overflow: visible. Tôi đã giải quyết nó bằng cách định vị hoàn toàn trong một trình bao bọc (không lý tưởng, nhưng tốt nhất tôi biết), như thế này:

.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

một điều dễ dàng hơn để làm sẽ thiết lập chiều rộng tối đa của mục lưới như vậy:

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