CSS 그리드와 Flexbox를 사용하여 그리드 레이아웃에서 반응형 사각형을 만드는 방법은 무엇입니까?

반응형 사각형으로 그리드 레이아웃을 만드는 방법

이 글에서는 CSS를 사용하여 반응형 사각형으로 그리드 레이아웃을 만드는 방법을 설명합니다.

CSS 그리드 접근 방식

CSS 그리드의 경우 다음과 같은 조합을 사용할 수 있습니다. 반응형 사각형을 생성하기 위한 그리드 템플릿 열 및 패딩 하단 트릭. 패딩 하단 트릭은 사각형의 패딩에 백분율 값을 할당하여 가로 세로 비율을 1:1로 효과적으로 설정합니다.

.square-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

.square {
    padding-bottom: 100%;
}

Flexbox 접근 방식

Flexbox를 사용하면 유사한 패딩을 사용할 수 있습니다. -반응형 사각형을 만드는 하단 기술. 패딩에 백분율 값을 할당하여 플렉스 항목이 동일한 종횡비를 갖도록 설정할 수 있습니다.

.square-container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    padding-bottom: 100%;
}

두 접근 방식 모두 백분율 패딩을 보장하기 위해 의사 요소나 추가 래퍼를 사용해야 한다는 점에 유의하세요. 플렉스나 그리드 항목이 아닌 사각형 자체에 적용됩니다.

미디어 쿼리 사용 반응성

작은 화면에서 그리드 레이아웃을 단일 열로 축소하려면 미디어 쿼리를 사용할 수 있습니다.

@media (max-width: 768px) {
    .square-container {
        grid-template-columns: 100%;
        flex-direction: column;
    }
}

결론

이러한 기술을 결합하여 다음을 만들 수 있습니다. 다양한 화면 크기와 기기 방향에 걸쳐 일관된 종횡비를 유지하는 반응형 사각형이 있는 그리드 레이아웃입니다.

위 내용은 CSS 그리드와 Flexbox를 사용하여 그리드 레이아웃에서 반응형 사각형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!