CSS 그리드 레이아웃 정사각형 셀

Question

CSS 그리드 레이아웃을 기반으로 대시보드 같은 뷰를 만들고 싶습니다. 나는 화면의 전체 길이에 걸쳐 16개의 열을 펼치고 싶습니다(반응성이 있어야 함). 그런 다음 셀을 정사각형으로 만들기 위해 셀의 높이를 셀의 너비에 따라 결정해야 합니다. 문제는 일부 셀이 여러 셀에 걸쳐 있기를 원한다는 것입니다. 예를 들어, 2x1 셀을 차지하는 요소를 원합니다.

그래서 기본 그리드 레이아웃이 생겼습니다.

.grid-container {
    디스플레이: 그리드;
    그리드 템플릿 열: 반복(16, 1fr);
    그리드 자동 행: var(--tile-unit);
    간격: var(--tile-gap);
    정렬 내용: 시작;
}

.grid-항목 {
    배경: 밝은 회색;
    테두리 반경: 10px;
}

여러 열이나 행에 걸쳐 있는 요소에 대한 클래스도 있습니다.

.width-unit-2 {
    그리드-열-끝: 범위 2;
}

.높이-단위-2 {
    그리드 행 끝: 범위 2;
}

이제 요소의 가로 세로 비율을 사용해 보겠습니다. 이는 2x1 요소에 대해 잘 작동하지만 2x2 요소를 원할 경우 해당 클래스에서 종횡비만 정의할 수는 없으며 이 경우에는 별도의 클래스를 정의해야 합니다.

종횡비를 사용하지 않고 그리드 셀을 정사각형으로 만드는 방법이 있나요?

Answer 1

이 정사각형의 크기를 설정하세요aspect-ratio实际上是1x1，然后CSS根据height或width