컨텐츠가 그리드 항목을 확장하지 못하도록 방지

TL; DR :table-layout: fixed CSS 그리드 와 같은 것이 있습니까?

나는 몇 달 동안 큰 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: auto및 min-height: auto입니다.

당신은에 그리드 항목을 설정하여이 동작을 무시할 수 있습니다 min-width: 0, min-height: 0또는 overflow이외의 값 visible.

사양에서 :

6.6. 그리드 항목의 자동 최소 크기

모눈 항목에보다 합리적인 기본 최소 크기를 제공하기 위해이 사양에서는 / auto값이 지정된 축의 자동 최소 크기를 그리드 항목에 적용하는 것으로 정의 합니다. (이 효과는 플렉스 항목에 부과 된 자동 최소 크기와 유사합니다.)min-widthmin-heightoverflowvisible

다음은 플렉스 항목에 대한 자세한 설명이지만 그리드 항목에도 적용됩니다.

• 플렉스 아이템이 컨텐츠 크기를 넘어 축소되지 않는 이유는 무엇입니까?

이 포스트는 또한 중첩 컨테이너의 잠재적 인 문제와 주요 브라우저 간의 알려진 렌더링 차이에 대해서도 다룹니다 .

레이아웃을 수정하려면 코드를 다음과 같이 조정하십시오.

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

위의 솔루션은 그리드 항목 수준에서 작동합니다. 컨테이너 수준 솔루션에 대해서는 다음 게시물을 참조하십시오.

• 1max는 그렇지 않은데 minmax (0, 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
  }