CSS 그리드가 그리드 항목을 암시적 그리드의 마지막 행/열까지 확장할 수 있습니까?

암시적 그리드의 마지막 행/열까지 그리드 항목 범위 만들기

소개

암시적 그리드에서 행 수와 columns가 명시적으로 정의되어 있지 않으면 정확한 숫자를 알지 못한 채 그리드 항목을 마지막 행이나 열까지 확장하는 것이 어려울 수 있습니다. 이 질문은 CSS Grid를 사용하여 이를 달성할 수 있는 가능성을 탐구합니다.

가능한가요?

현재 버전에서 CSS Grid는 처음부터 그리드 항목을 직접 확장할 수 없습니다. 암시적 그리드의 마지막 행/열로 이동합니다. 명시적 그리드의 끝 가장자리부터 계산하는 데 음의 정수를 사용할 수 있지만 이 시나리오에는 이 접근 방식이 적용되지 않습니다.

절대 위치 지정을 사용하는 대체 솔루션

그리드 제한으로 인해 마지막까지 스패닝이 방지됩니다. 행/열, 절대 위치 지정은 잠재적인 해결 방법을 제공합니다. 항목을 컨테이너 내부에 절대적으로 배치하면 암시적 그리드 끝까지 공간을 채우도록 위치를 지정하고 늘릴 수 있습니다.

절대 위치 지정 사용 예

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  height: 200px;
}

.item {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: yellow;
}

<div class="container">
  <div class="item">Item</div>
  ... other grid items
</div>

In 이 예에서는 .item이 절대적으로 배치되고 컨테이너의 전체 높이를 채우기 위해 늘어나서 마지막까지 확장되는 듯한 느낌을 줍니다. row.

결론

CSS 그리드 제한으로 인해 암시적 그리드의 마지막 행/열로 직접 확장할 수는 없지만 절대 위치 지정과 같은 대체 기술을 사용하여 비슷한 효과를 얻을 수 있습니다.

위 내용은 CSS 그리드가 그리드 항목을 암시적 그리드의 마지막 행/열까지 확장할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!