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

월에는 큰 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 그리드 레이아웃을 사용하지 않고도 캘린더의 스타일을 지정할 수 있는 꽤 쉬운 방법이 있다는 것을 알고 있습니다. 그러나 이 질문은 구체적인 예제를 해결하기보다는 주제에 대한 일반적인 지식에 관한 것입니다.

Loilo
편집된 질문19일 2월 2018 в 10:28
프로그래밍
css3 css css-grid grid-layout
9일 4월 2017 в 9:06
1뷰
질문에 대한 의견 (4)
해결책

기본적으로 그리드 항목은 해당 콘텐츠의 크기보다 작을 수 없습니다.

그리드 항목의 초기 크기는 '최소 너비: 자동' 및 '최소 높이: 자동'입니다.

그리드 항목을 최소 너비: 0, 최소 높이: 0 또는 보이기가 아닌 다른 값으로 설정하여 이 동작을 재정의할 수 있습니다.

*사양에서

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

그리드 항목에 대한 보다 합리적인 기본 최소 크기를 제공하기 위해 이 명세는 '최소 너비'/'최소 높이'의 '자동' 값이 '오버플로'가 '표시'인 그리드 항목에도 지정된 축의 자동 최소 크기를 적용하도록 정의합니다. (이 효과는 플렉스 항목에 적용되는 자동 최소 크기와 유사합니다.)

여기에는 플렉스 항목에 대한 자세한 설명이 나와 있지만 그리드 항목에도 적용됩니다:

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

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

.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대minmax(0, 1fr)`

위의 솔루션은 그리드 항목 수준에서 작동합니다. 컨테이너 수준 솔루션은 이 게시물을 참조하세요:

Michael_B
편집된 답변31일 1월 2019 в 1:23
해설 (9)

이전 답변도 꽤 훌륭하지만, 그리드에 해당하는 고정 레이아웃이 있다는 점을 언급하고 싶었습니다. 트랙 크기로 1fr 대신 minmax(0, 1fr)를 작성하기만 하면 됩니다.

해설 (5)

기존 답변은 대부분의 경우를 해결합니다. 그러나 그리드 셀의 내용이 '오버플로 : 표시'되어야하는 경우가 발생했습니다. 저는 다음과 같이 래퍼 안에 절대적으로 배치하여 해결했습니다 (이상적이지는 않지만 제가 아는 한 최선입니다):


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

https://codepen.io/bjnsn/pen/vYYVPZv

해설 (0)