고급 CSS: 수량 쿼리 + Flex로 유연한 반응형 그리드 만들기 + 미디어 쿼리 없음
문제
우리 디자이너의 최근 과제는 다음과 같습니다.
데스크톱 화면에서 다음과 같이 작동하도록 사각형 그리드를 만듭니다.
이를 달성하기 위해 JS를 사용하지 않고 IE 10 이상에서 작동하도록 만들고 모든 화면에서 유연하고 작동하기를 원하므로 미디어 쿼리를 사용하지 않습니다.
언뜻 보기에 이것은 해결해야 할 사소한 문제처럼 보일 수 있습니다. 몇 가지 플렉스 속성으로 이 문제를 대부분 해결할 수 있지만 여기에는 문제가 있습니다. 항목이 4개이면 모두 같은 행에 렌더링되어야 하지만 사용자가 하나를 더 추가하면 처음 세 항목이 한 행에 표시되어야 합니다. 그런 다음 다음 두 개는 자체 행에 렌더링되어야 합니다. JS 없이 어떻게 가능할까요?
구조에 대한 CSS 수량 쿼리
솔루션을 파고들기 전에 CSS 카운팅에 대해 조금 가르쳐 드리고 싶습니다. CSS는 약간의 영리한 수학과 함께 컨테이너 내에 얼마나 많은 요소가 있는지 추적하는 데 도움이 되는 의사 클래스 세트를 제공합니다. Quantity Queries for CSS by Heydon Pickering은 이것을 훌륭하게 요약하지만 tldr로:
:first-child
, :last-child
, :nth-child()
및 :nth-last-child()
의 힘을 사용하여 예를 들어 다음과 같이 할 수 있습니다. <li>
에 몇 개의 <ul>
가 있는지 말하십시오.해결책
<ul>
<li></li>
<li></li>
<li></li>
</ul>
:root {
--margin: 1rem;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: calc(-1 * var(--margin));
padding: 0;
}
li {
flex-basis: calc(33.3333% - (2 * var(--margin)));
flex-grow: 1;
flex-shrink: 0;
margin: var(--margin);
min-width: 290px;
}
li:nth-last-child(4n):first-child ~ li,
li:nth-last-child(4n):first-child,
li:nth-last-child(7n):not(:nth-last-child(14n)):first-child ~ li,
li:nth-last-child(7n):not(:nth-last-child(14n)):first-child {
flex-basis: calc(25% - (2 * var(--margin)));
}
이 방법은 Heydon Pickering's ingenious Albatross strategy (must-read)을 사용합니다. 여기서 유일한 주의 사항은
min-width: 290px
입니다. 우리는 최소 너비를 설정해야 하며 이 최소 너비는 화면에서 옆으로 더 좁게 만듭니다. 낮게 유지하십시오!li:nth-last-child(4n)
는 마지막 요소에서 4단계의 배수(1부터 계산)에 있는 요소를 선택합니다. <ul>
내부에 10개의 요소가 있는 경우 처음부터 3번과 7번 요소가 선택됩니다(10, 9, 8, (7), 6, 5, 4, (3), 2, 1). li:nth-last-child(4n):first-child)
그런 다음 마지막 요소 및 첫 번째 요소에서 4단계의 배수에 있는 모든 요소를 대상으로 합니다. General sibling combinator (~)을 추가하면 이 첫 번째 항목 뒤에 오는 모든 요소를 대상으로 지정할 수 있습니다.flex-basis
내부에 4개 또는 7개의 배수<li>
요소가 있을 때마다 <ul>
가 변경되는 것을 확인하십시오.최종 결과
약간의 정리 후 최종 결과는 다음과 같습니다! ( Go to fullscreen version )
Reference
이 문제에 관하여(고급 CSS: 수량 쿼리 + Flex로 유연한 반응형 그리드 만들기 + 미디어 쿼리 없음), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/boyum/advanced-css-quantity-queries-creating-a-fluid-responsive-grid-with-flex-zero-media-queries-5h6p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)