콘텐츠 확장을 제한하는 그리드 항목

Question

TL;DR: CSS 그리드 레이아웃에 대해 table-layout:fixed와 유사한 속성이 있나요?

<시간 />

월에 대한 큰 4x3 그리드가 있고 내부에 날짜에 대한 7x6 그리드가 중첩되어 있는 연도 보기 달력을 만들려고 합니다.

달력은 전체 페이지를 채워야 하므로 연도 그리드 컨테이너의 너비와 높이가 100%로 설정됩니다.

.year-grid {
  너비: 100%;
  높이: 100%;

  디스플레이: 그리드;
  그리드 템플릿: 반복(3, 1fr) / 반복(4, 1fr);
}

.월 그리드 {
  디스플레이: 그리드;
  그리드 템플릿: 반복(6, 1fr) / 반복(7, 1fr);
}

다음은 실제 예시입니다: https://codepen.io/loilo/full/ryXLpO/

간단히 설명하기 위해 이 예에서는 각 달이 31일로 구성되어 있으며 월요일에 시작됩니다.

또한 문제를 보여주기 위해 매우 작은 글꼴 크기를 선택했습니다.

페이지에 수백 개의 날짜 셀이 있으므로 그리드 항목(예: 날짜 셀)은 매우 간결합니다. 그리고 날짜 레이블이 너무 커지면(예제에서 왼쪽 상단에 있는 버튼을 사용하여 글꼴 크기를 조정함) 그리드가 커지고 페이지 경계를 초과합니다.

이러한 동작을 방지할 수 있는 방법이 있나요?

원래 연도 그리드의 너비와 높이를 100%로 설정했기 때문에 여기서부터 시작해야 할 수도 있지만 이 요구 사항을 충족할 그리드 관련 CSS 속성을 찾을 수 없습니다.

면책 조항:CSS 그리드 레이아웃을 사용하지 않고도 이 달력의 스타일을 쉽게 지정할 수 있는 방법이 있다는 것을 알고 있습니다. 그러나 이 질문은 구체적인 사례를 다루기보다는 주제에 대한 일반적인 지식에 관한 것입니다.

Answer 1

이전 답변은 매우 훌륭하지만 그리드의 레이아웃을 수정하는 것과 동등한 방법이 있다는 점도 언급하고 싶었습니다. 트랙을 minmax(0, 1fr)而不是1fr로 대문자로 시작하면 됩니다.

Answer 2

기본적으로 그리드 항목의 크기는 해당 내용의 크기보다 작을 수 없습니다.

그리드 항목의 초기 크기는 min-width: auto和min-height: auto입니다.

그리드 항목을 min-width: 0，min-height: 0或overflow（除visible 이외의 값으로 설정하여 이 동작을 재정의할 수 있습니다.

출처:

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

• Flex 항목을 콘텐츠 크기 아래로 축소할 수 없는 이유는 무엇입니까?

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

---

레이아웃을 수정하려면 코드를 다음과 같이 조정하세요.

으아아아

jsFiddle 데모

---

1fr与minmax(0, 1fr)

위의 솔루션은 그리드 항목 수준에서 작동합니다. 컨테이너 수준 솔루션에 대해서는 다음 문서를 참조하세요.

• 긴 요소에 대해 minmax(0, 1fr)는 유효하지만 1fr은 유효하지 않은 이유는 무엇입니까?