셀에 사각형을 그리는 그리드가 있습니다. 행과 열의 개수를 갖고 그리드 셀을 그리고 각 셀에 (배열에 따라) 정사각형이 있어야 하는지 확인하고 필요한 경우 정사각형을 그립니다. HTML 최종 결과는 다음과 같습니다. (1개의 행과 3개의 열이 있다고 가정하면 2개의 셀에만 사각형이 있어야 합니다.)
으아아아 으아아아
행은 화면의 전체 너비를 차지하며 열 크기는 모든 열에서 동일해야 하며 화면의 열 수에 따라 변경되어야 합니다(예를 들어 열이 5개인 경우 모두 너비가 100이어야 합니다) 픽셀이지만 1000개의 열이 있는 경우 너비는 모두 10픽셀이어야 합니다.
내 문제는 열 크기의 특정 중단점 이후 패딩과 테두리 반경이 이상하게 보이고 해당 중단점에 도달하면 해당 값을 변경하고 싶다는 것입니다. @container 쿼리는 아직 완전히 지원되지 않기 때문에 사용할 수 없습니다.
도움이 된다면 vue 2를 사용하고 있습니다. 하지만 이 경우에는 CSS 솔루션이 더 나을 것이라고 생각합니다.
P粉4278776762024-04-04 14:37:48
설명된 문제를 해결해 보세요.
이 시나리오를 달성하기 위한 조건을 더 잘 탐색하는 데 도움이 되는 작은 데모를 만들었습니다.
.row 元素仍然是一个 Flexbox 容器，但它的 Flex 项目没有设置 border，而是使用 outline 스타일링 설정
윤곽선은 공간을 차지하지 않으며 다른 요소에 의해 생성된 윤곽선과 충돌할 때 "축소"됩니다.
그래서 레이아웃이 이상한 스타일의 영향을 받지 않도록 하기 위해 Flex 항목의 테두리를 표시하려고 할 때 이 데모에서는 해당 테두리를 렌더링하는 데 2가지 주요 측면만 사용합니다.
间隙轮廓 크기를 설정하세요.
요소 또한 빨간색 점은 position:absolute 的 ::after 의사 요소와 함께 적용되어 그리드 레이아웃에 아무 영향도 주지 않습니다.
여기서 페이지 상단에 position:fixed가 포함된 "대시보드"를 추가하여 다음을 제어할 수 있습니다.
display: none; 不会更改网格布局它完全取决于通过自定义变量 --col-width 设置的 .column 요소 크기우리는 산만함을 최소화하고 셀의 고정 크기만을 기반으로 그리드 레이아웃을 올바르게 설정하는 데 필요한 모든 단계를 수행하려고 노력하지만 여전히 일부 렌더링 문제가 있으며 때로는 특정 줄의 테두리 크기가 있습니다. 불일치 패턴이 발생합니다. 데스크톱 모니터가 아닌 노트북 디스플레이에만 문제가 있다고 해야 할까요 . 이것이 또 다른 요인입니다.
저는 데모에서 차이를 고려하여 다양한 매개변수를 시도하고 수치를 계산했습니다. 적절하고 안전한 레이아웃은 잠재적인 문제를 최소화할 수 있습니다(예: 테두리 크기를 늘릴 수도 있음).
Flex 레이아웃을 사용하면 이보다 더 많은 것을 얻을 수 없습니다.