미디어 쿼리 없이 CSS 그리드 래핑을 달성할 수 있나요?

자동 채우기 또는 자동 맞춤을 사용한 CSS 그리드 래핑

미디어 쿼리를 사용하지 않고도 CSS 그리드 래핑을 구현할 수 있나요? 이 쿼리는 바람직한 래핑 동작을 사용하여 그리드에 비결정적 항목을 배치해야 한다는 요구 사항에서 비롯됩니다. 적절한 간격을 확보하는 데 있어 Flexbox의 단점으로 인해 실행 가능성이 떨어지는 옵션이 됩니다.

샘플 코드:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

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

자동 채우기와 자동 맞춤

해결책은 둘 중 하나를 사용하는 것입니다. Repeat()의 첫 번째 매개변수로 자동 채우기 또는 자동 맞춤

자동 채우기

자동 채우기를 반복 횟수로 지정하면 그리드가 그리드 컨테이너를 넘치지 않도록 반복 횟수가 조정됩니다.

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

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