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

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

CSS 그리드의 일반적인 과제 중 하나는 사용 가능한 공간에 맞게 항목을 래핑하는 것입니다. 미디어 쿼리가 바람직하지 않은 경우 대체 접근 방식을 사용해야 합니다.

자동 채우기 솔루션

Repeat() 표기법의 변형입니다. 반복 횟수로 지정하면 자동 채우기는 오버플로를 일으키지 않고 사용 가능한 공간에 맞는 반복 횟수를 자동으로 계산합니다.

예:

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

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

자동 채우기를 사용하면 그리드는 사용 가능한 너비에 따라 열 수를 조정하여 항목이 멋지게 포장되도록 합니다. 이렇게 하면 고정 열 너비를 지정할 필요가 없습니다.

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