0
CSS 격자의 auto-fit 기능을 사용하여 화면 크기에 맞게 깔끔하게 격자 항목을 줄 바꿈하려고합니다. 이것은 auto-fit ted 격자 컨테이너에 넣은 모든 항목의 크기가 같을 때 잘 작동합니다. 그러나 항목을 다른 크기로 만들면 작은 화면 크기에 대해 항목이 줄 바꿈 될 때 바람직하지 않은 크기가 지정됩니다.자동 맞춤을 사용할 때 CSS 그리드의 붕괴 - 열이 줄 바꿈 될 때 원치 않는 동작
.wrapper {
display: grid;
padding: 10px;
width: 90%;
grid-gap:10px;
grid-template-columns:
repeat(auto-fit, minmax(300px, 1fr));
box-sizing: border-box;
border: 1.5px solid darkblue;
}
.first{
grid-column: span 1;
box-sizing: border-box;
border: 1.5px solid darkgrey;
}
.second{
grid-column: span 2;
box-sizing: border-box;
border: 1.5px solid darkgrey;
}<div class='wrapper'>
<div class='first'>
First
</div>
<div class='second'>
Second
<div>
</div>다른 행동이 스크린 샷은 무슨 일이 일어나고 있는지 보여줍니다
이 코드는 내가 (당신이 브라우저 창 크기를 조정하는 경우가 명확하게 문제를 볼 수 있습니다) 데 문제를 보여
그림 1은 무엇이다 전체 화면에서 항목의 크기가 같을 때 표시됩니다. - 그림 2로 바뀝니다.
그림 3은 항목의 크기가 다를 때 표시되는 항목입니다. 먼저 그림 4 (예상 됨)로 래핑 된 후 그림 5 - 이것은 그림 2와 같지 않습니다 (이상적인 행동입니다) - 두 항목의 크기가 다릅니다.
작은 화면 크기에서는 auto-fit에 따라 그리드 항목이 축소되지만 접힌 그리드 항목 사이의 틈은 축소되지 않기 때문인 것으로 생각됩니다. 크롬에서 디버깅을 보여 주지만 그것을 극복하는 방법을 모르겠습니다!
올바른 경로에 있습니까? 컨테이너에 넣을 항목의 크기가 다른 경우 그림 2에서 원하는 동작을 얻을 수있는 방법이 있습니까?
문제는 첫 번째 항목에 'span : 1'이 있고 두 번째 항목에 'span : 2'가 있다는 것입니다. 그래서 포장을하면 그 치수가 그대로 유지됩니다. 그런 다음 두 번째 행이 만들어진 후 첫 번째 행에 남아있는 비어있는 그리드 셀의 문제가 있습니다. 그리드 - 칼럼 - 갭 (grid-column-gap) 문제가 있습니다. 극복해야 할 것들이 많이 있습니다. 귀하의 전반적인 목표에 대한 귀하의 질문에 세부 사항이 충분하지 않습니다. –
@ahx 오프 사이트 코드 샌드 박스에 링크하는 대신 [mcve]를 직접 게시물에 추가하여 질문을 크게 개선 할 수 있습니다. – TylerH
저에게 다시와 주셔서 감사드립니다. 내 전반적인 목표는 그림 2의 효과를 얻는 것입니다. 그림 2의 경우 크기가 다른 경우에도 항목이 줄 바꿈됩니다. 귀하의 포인트에 관해서 : 나는 그들이 동일한 행에있을 때 그 비율로 표시하고자하기 때문에 의도적으로 두 개의 서로 다른 크기에 걸쳐 있습니다. 랩이 끝나면 비어있는 그리드 셀이 생성되는 것을 볼 수 있습니다.하지만 비어있는 것처럼 왜 완전하게 붕괴되지 않는지 나는 알지 못합니다. '자동 맞춤'이 수행해야하는 작업이 아닌가? 나는 네가 무슨 뜻인지 모르겠다. 그리드 칼럼 갭. – ahx