자동 채우기 또는 자동 맞춤을 사용하여 미디어 쿼리 없이 CSS 그리드 래핑을 달성하는 방법은 무엇입니까?

미디어 쿼리 없이 래핑에 CSS 그리드 자동 채우기 또는 자동 맞춤 사용

CSS 그리드에서는 미디어 쿼리 없이 자동 래핑이 가능합니다. 그리드 템플릿 열 내의 반복() 표기법에서 자동 채우기 또는 자동 맞춤 키워드를 사용하거나 Grid-template-rows.

자동 채우기

auto-fill 키워드는 컨테이너의 사용 가능한 공간을 채울 그리드 셀 수를 정의합니다. 넘치지 않고 컨테이너 크기에 맞게 열 수를 자동으로 조정합니다.

이 예에서 Grid-template-columns 속성은 그리드가 자동으로 너비를 186px 너비로 채워야 함을 지정합니다.

자동 맞춤

자동 맞춤 키워드는 다음과 같이 작동합니다. 자동 채우기와 유사하지만 열 수 대신 사용 가능한 공간에 맞게 열 크기를 조정합니다.

이 예에서 Grid-template-columns 속성은 그리드가 가능한 한 많은 열을 사용 가능한 공간에 자동으로 맞춰야 하며, 각 열의 최소 너비는 186px이고 자동 최대 너비는 자동으로 맞춰져야 합니다.

이러한 기술을 사용하면 다음과 같은 CSS 그리드를 만들 수 있습니다. 미디어 쿼리 없이 콘텐츠를 래핑하여 사용 가능한 공간에 맞게 동적으로 조정합니다.

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