월에는 큰 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 그리드 레이아웃을 사용하지 않고도 캘린더의 스타일을 지정할 수 있는 꽤 쉬운 방법이 있다는 것을 알고 있습니다. 그러나 이 질문은 구체적인 예제를 해결하기보다는 주제에 대한 일반적인 지식에 관한 것입니다.
기본적으로 그리드 항목은 해당 콘텐츠의 크기보다 작을 수 없습니다.
그리드 항목의 초기 크기는 '최소 너비: 자동' 및 '최소 높이: 자동'입니다.
그리드 항목을 최소 너비: 0
, 최소 높이: 0
또는 보이기
가 아닌 다른 값으로 설정하여 이 동작을 재정의할 수 있습니다.
*사양에서
그리드 항목에 대한 보다 합리적인 기본 최소 크기를 제공하기 위해 이 명세는 '최소 너비'/'최소 높이'의 '자동' 값이 '오버플로'가 '표시'인 그리드 항목에도 지정된 축의 자동 최소 크기를 적용하도록 정의합니다. (이 효과는 플렉스 항목에 적용되는 자동 최소 크기와 유사합니다.)
여기에는 플렉스 항목에 대한 자세한 설명이 나와 있지만 그리드 항목에도 적용됩니다:
이 글에서는 중첩 컨테이너의 잠재적 문제와 주요 브라우저 간에 알려진 렌더링 차이점에 대해서도 다룹니다.
레이아웃을 수정하려면 코드를 다음과 같이 조정하세요:
.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 */
}
대
minmax(0, 1fr)`위의 솔루션은 그리드 항목 수준에서 작동합니다. 컨테이너 수준 솔루션은 이 게시물을 참조하세요:
기존 답변은 대부분의 경우를 해결합니다. 그러나 그리드 셀의 내용이 '오버플로 : 표시'되어야하는 경우가 발생했습니다. 저는 다음과 같이 래퍼 안에 절대적으로 배치하여 해결했습니다 (이상적이지는 않지만 제가 아는 한 최선입니다):
.month-grid {
디스플레이 : 그리드;
그리드-템플릿: 반복(6, 1fr) / 반복(7, 1fr);
background: #fff;
그리드 간격: 2px;
}
.day-item-wrapper {
위치: 상대적;
}
.day-item {
위치: 절대
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
배경: rgba(0,0,0,0.1);
}