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

CSS 및 자동 채우기를 사용한 그리드 래핑

자동 채우기를 사용하면 미디어 쿼리에 의존하지 않고 CSS에서 그리드 래핑을 달성할 수 있습니다. 반복() 표기법을 입력하세요. 원래 질문의 코드 조각은 명시적인 열 너비가 있는 그리드를 보여 주지만 항목이 자체 너비를 정의할 수 있도록 다음과 같이 수정할 수 있습니다.

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

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

자동 채우기

CSS 그리드 레이아웃 사양에 정의된 자동 채우기는 그리드가 컨테이너를 오버플로하지 않으면서 반복() 표기법의 반복 횟수가 가능한 가장 큰 값이 되도록 보장합니다. 이를 통해 그리드는 항목의 너비에 따라 열 수를 동적으로 조정할 수 있습니다.

이 경우 자동 채우기를 반복 횟수로 지정하고 최소 콘텐츠를 각 열의 고정 크기로 지정합니다. Min-content는 각 열의 크기를 해당 콘텐츠에 맞게 조정하여 항목이 자체 너비를 결정할 수 있도록 합니다.

결과적으로 미디어 쿼리 없이도 항목을 래핑하여 효율적으로 간격을 잘 두는 그리드가 생성됩니다. 비결정적인 항목 수의 경우에도 마찬가지입니다.

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