미디어 쿼리 없이 CSS 그리드 래핑을 달성하는 방법은 무엇입니까?

미디어 쿼리 없이 CSS 그리드 래핑 달성

CSS 그리드 영역에서 미디어 쿼리에 의지하지 않고 바람직한 래핑 효과를 얻는 것은 다음과 같습니다. 공통의 도전. 이 어려운 목표를 달성하기 위해 자동 채우기 기능이 있는 반복() 표기법을 사용하는 솔루션을 살펴보겠습니다.

반복(자동 채우기)으로 접근 방식 개선

Grid-template-columns를 통해 그리드 항목의 너비를 명시적으로 지정하는 대신 자동 채우기를 반복 횟수로 사용하는 Repeat() 표기법을 활용할 수 있습니다. 자동 채우기는 오버플로 없이 그리드 컨테이너 내에 수용될 수 있는 최대 열 수를 동적으로 계산합니다.

자동 채우기 설명

반복의 자동 채우기 변형 ()는 다음 원칙에 따라 반복 횟수를 결정합니다. 그리드 컨테이너의 관련 축에 미리 정의된 크기 또는 최대 크기가 있는 경우 열 수는 그리드가 해당 컨테이너를 넘어 확장되지 않도록 하는 가장 높은 양의 정수와 일치합니다.

샘플 구현

자동 채우기의 강력한 기능을 보여주기 위해 초기 코드 조각을 향상해 보겠습니다.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid > * {
  background-color: green;
  height: 200px;
}

이번 조정을 통해 그리드 항목은 사용 가능한 공간에 맞게 너비를 동적으로 조정하고 필요에 따라 새 줄로 원활하게 줄 바꿈합니다.

항목 너비 유연성에 대한 참고 사항

또한 자동 채우기를 사용하면 어린이가 자신의 너비를 지정할 수 있으므로 너비를 하드 코딩할 필요가 없습니다. 이 접근 방식은 그리드 레이아웃의 유연성과 반응성을 향상시킵니다.

위 내용은 미디어 쿼리 없이 CSS 그리드 래핑을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!