암시적 그리드에서 행 수와 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!