콘텐츠 확장을 제한하는 그리드 항목
<p><strong>TL;DR:</strong> CSS 그리드 레이아웃에 대해 <code>table-layout:fixed</code>와 유사한 속성이 있나요? </p>
<시간 />
<p>월에 대한 큰 4x3 그리드가 있고 내부에 날짜에 대한 7x6 그리드가 중첩되어 있는 연도 보기 달력을 만들려고 합니다. </p>
<p>달력은 전체 페이지를 채워야 하므로 연도 그리드 컨테이너의 너비와 높이가 100%로 설정됩니다. </p>
<pre class="brush:php;toolbar:false;">.year-grid {
너비: 100%;
높이: 100%;
디스플레이: 그리드;
그리드 템플릿: 반복(3, 1fr) / 반복(4, 1fr);
}
.월 그리드 {
디스플레이: 그리드;
그리드 템플릿: 반복(6, 1fr) / 반복(7, 1fr);
}</pre>
<p>다음은 실제 예시입니다: https://codepen.io/loilo/full/ryXLpO/</p>
<p>간단히 설명하기 위해 이 예에서는 각 달이 31일로 구성되어 있으며 월요일에 시작됩니다. </p>
<p>또한 문제를 보여주기 위해 매우 작은 글꼴 크기를 선택했습니다. </p>
<p>페이지에 수백 개의 날짜 셀이 있으므로 그리드 항목(예: 날짜 셀)은 매우 간결합니다. 그리고 날짜 레이블이 너무 커지면(예제에서 왼쪽 상단에 있는 버튼을 사용하여 글꼴 크기를 조정함) 그리드가 커지고 페이지 경계를 초과합니다. </p>
<p>이러한 동작을 방지할 수 있는 방법이 있나요? </p>
<p>원래 연도 그리드의 너비와 높이를 100%로 설정했기 때문에 여기서부터 시작해야 할 수도 있지만 이 요구 사항을 충족할 그리드 관련 CSS 속성을 찾을 수 없습니다. </p>
<p><em>면책 조항:</em>CSS 그리드 레이아웃을 사용하지 않고도 이 달력의 스타일을 쉽게 지정할 수 있는 방법이 있다는 것을 알고 있습니다. 그러나 이 질문은 구체적인 사례를 다루기보다는 주제에 대한 일반적인 지식에 관한 것입니다. </p>
