CSS 그리드: 하위 콘텐츠가 열 너비를 초과할 때 새 행 생성

Question

<p>CSS 그리드를 기반으로 하는 2열 레이아웃이 있습니다. 두 번째 열의 내용이 <code>1fr</code>을 초과하면 새 행을 만들고 싶습니다. 현재로서는 내용이 단순히 열을 넘치게 됩니다. </p> <p>이 레이아웃의 요구 사항 중 하나는 <code>오른쪽 메뉴</code> 열의 항목이 한 행에 있어야 한다는 것입니다. 나는 이것을 다음과 같이 달성합니다: </p> <pre class="brush:php;toolbar:false;">.right-menu { ... Grid-auto-flow: 열 밀도; ... }</pre> <p><code>grid-auto-flow</code> 속성을 제거하면 오버플로가 중지됩니다. 그러나 항목이 이제 여러 행으로 쌓여 있어 내가 원하는 것이 아닙니다. </p> <p>또한 <code>.right-menu</code>를 </p> <pre class="brush:php;toolbar:false;">.right-menu { 디스플레이: '인라인 플렉스'; }</pre> <p>그러나 결과는 이전과 같습니다. 콘텐츠가 열에 넘칩니다. JavaScript 없이 이를 수행할 수 있는 방법이 있습니까? 미디어 쿼리는 뷰포트 너비가 아닌 콘텐츠를 기반으로 하므로 더 이상 사용되지 않습니다. </p> <p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>.main-container { 배경색: #ccc; 패딩: 1.0rem; 너비: 1200px; 여백: 1.0rem 0 0 1.0rem; } .menu-grid { 디스플레이: 그리드; 그리드-템플릿-열: 반복(자동 채우기, minmax(600px, 1fr)); 그리드 템플릿 행: 반복(자동 채우기, 1fr); 그리드 자동 흐름: 행; 그리드 행 간격: 1.0rem; } .왼쪽 메뉴 { 글꼴 크기: 1.25rem; } .오른쪽 메뉴 { 디스플레이: 그리드; 배경색: 흰색; 그리드 템플릿 열: 반복(자동 채우기, minmax(65px, 1fr)); Grid-auto-flow: 열 밀도; 그리드 행 간격: 0.5rem; 그리드-열-간격: 0.75rem; } .오른쪽 항목 { 배경색: #fff; 텍스트 정렬: 중앙; 최소 너비: 65px; 테두리: 1px 단색 검정; }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><div class="main-container"> <div class="menu-grid"> <div class="left-menu">왼쪽

1

0

0

P粉212114661

회신하다

모든 응답(1)

나는 대답할 것이다 닫다

P粉2698479972023-09-06 11:04:03 1층

Flexbox를 사용하면 행운이 찾아옵니다

으아악 으아악

좋다 +0

답글 추가 关闭回复

P粉212114661

회신하다

Answer 1

Flexbox를 사용하면 행운이 찾아옵니다

으아악 으아악