CSS 그리드 템플릿 열 - 새 행에 단일 열 방지

Question

CSS 그리드를 사용하여 열의 크기를 조정하고 맞지 않으면 새 행으로 이동합니다. 모든 것을 설명하는 코드는 다음과 같습니다.

으아악 으아악

으아악

이제 내가 피하고 싶은 것은 하나의 (단일) 열만 새 행으로 이동하는 것입니다. 대신, 더 일찍 축소되어 2개의 열을 함께 이동합니다.

더 직관적으로 설명하자면 다음과 같습니다.

█ █ █ █

또한:

█ █ █

██

또한:

██

██

이것은 용납될 수 없습니다:

█ █ █

█

여기에서는 불필요한 미디어 쿼리를 피하고 싶습니다. 이것은 내 코드입니다: https://jsfiddle.net/tucado/0czokyxa/3/

Answer 1

같은 문제가 있는 사람이 있다면 해결책은 다음과 같습니다. https://jsfiddle.net/tucado/0czokyxa/5/

으아아아

및 CSS:

으아아아

@Temani-Afif님 감사합니다