미디어 쿼리 없이 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!