내용이 그리드 항목을 확장하지 못하도록 방지

내용이 그리드 항목을 확장하지 못하도록 방지

TL;DR: 다음과 같은 것이 있습니까?table-layout: fixedCSS 그리드를 위해?

---

저는 몇 달 동안 큰 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 그리드 레이아웃을 사용하지 않고 달력을 쉽게 스타일링할 수 있는 방법이 있다는 것을 알고 있습니다.하지만, 이 질문은 구체적인 예를 풀기보다는 주제에 대한 일반적인 지식에 관한 것입니다.

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

그리드 항목의 초기 크기:min-width: auto그리고.min-height: auto.

그리드 항목을 다음으로 설정하여 이 동작을 재정의할 수 있습니다.min-width: 0,min-height: 0또는overflow이외의 가치가 있는visible.

사양에서:

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

그리드 항목에 대해 보다 합리적인 기본 최소 크기를 제공하기 위해 이 사양은 다음과 같이 정의합니다.auto의 가치.min-width/min-height또한 지정된 축의 자동 최소 크기를 다음과 같은 그리드 항목에 적용합니다.overflow이라visible(이 효과는 플렉스 항목에 적용되는 자동 최소 크기와 유사합니다.)

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

• 유연한 항목이 콘텐츠 크기를 넘어서 축소되지 않는 이유는 무엇입니까?

또한 이 게시물은 중첩된 컨테이너 및 주요 브라우저 간의 알려진 렌더링 차이와 관련된 잠재적인 문제를 다룹니다.

---

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

.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 */
}

jsFiddle 데모

---

1fr 대minmax(0, 1fr)

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

• minmax(0, 1fr)는 긴 요소에 대해 작동하는 반면 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

언급URL : https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items