CSS 그리드의 자동 채우기와 자동 맞춤: 차이점은 무엇입니까?

그리드 레이아웃의 자동 채우기와 자동 맞춤의 차이점 이해

CSS 그리드로 작업할 때 "라는 용어를 자주 접하게 됩니다. 카드 기반 그리드 레이아웃 설정의 맥락에서 자동 채우기" 및 "자동 맞춤". 이러한 속성은 사용 가능한 항목이 사용 가능한 공간을 완전히 채우지 못할 수 있는 시나리오를 그리드가 처리하는 방법을 결정합니다.

자동 채우기와 자동 맞춤

둘 다 자동 채우기입니다. 자동 맞춤은 지정된 수의 그리드 트랙(열 또는 행)을 생성하지만 사용 가능한 항목이 모든 트랙을 채우기에 충분하지 않은 경우 동작이 다릅니다. 트랙.

• 자동 맞춤: 모든 트랙을 채울 만큼 항목이 충분하지 않으면 빈 트랙이 축소되고 기존 항목이 확장되어 여유 공간을 채웁니다.
• 자동 채우기: 자동 맞춤과 달리 빈 트랙은 자동 채우기에 유지되어 고정된 그리드 레이아웃이 됩니다. 항목 수에 관계없이

카드 표시에 미치는 영향

카드 그리드 레이아웃에서 자동 맞춤 대신 자동 채우기를 사용하면 카드가 몇 개만 있어도 카드는 별도의 엔터티로 계속 표시됩니다. 고정된 그리드 구조를 유지함으로써 자동 채우기를 사용하면 카드를 고르게 분포하고 명확하게 구분할 수 있습니다.

예

다음 코드를 고려하세요.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

자동 채우기를 사용하면 채울 카드가 충분한지 여부에 관계없이 그리드 컨테이너가 래퍼를 넘치지 않고 가능한 한 많은 열을 생성합니다. 모든 열. 기존 카드는 카드 레이아웃을 유지하면서 균등한 간격으로 독립적으로 표시됩니다.

결론

자동 채우기와 자동 맞춤 중에서 선택하는 것은 원하는 동작에 따라 다릅니다. 다양한 항목 수의 시나리오. 일관된 그리드 구조를 유지하려면 자동 채우기가 선호되는 반면, 자동 맞춤은 빈 트랙을 축소하여 항목을 확장하고 사용 가능한 공간을 채울 수 있도록 합니다.

위 내용은 CSS 그리드의 자동 채우기와 자동 맞춤: 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!