CSS 그리드와 Flexbox: 반응형 사각형을 만드는 데 가장 적합한 것은 무엇입니까?

동적 사각형을 사용하여 반응형 그리드 레이아웃 만들기

각 사각형의 높이가 동일하도록 반응형 사각형으로 그리드 레이아웃을 구성하는 것이 목표입니다. 폭에 맞춰 홈통으로 분리됩니다. 이를 달성하기 위해 CSS Grid 또는 Flexbox의 사용을 고려하고 있습니다.

CSS Grid

CSS Grid를 사용하면 그리드의 열과 높이를 정의할 수 있습니다. 그리드 영역의 백분율로 표시되는 사각형의 비율입니다. 예는 다음과 같습니다.

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

.square {
    height: 100%;
}

Flexbox

Flexbox에서는 flex-wrap 속성을 사용하여 반응형 레이아웃을 생성할 수 있습니다. 정사각형이 정사각형 종횡비를 유지하도록 하려면 패딩 하단 트릭을 사용하거나 의사 요소를 생성하여 적절한 높이를 설정할 수 있습니다.

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

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    border: 1px solid;
    box-sizing: border-box;
}

.square::before {
    content: '';
    display: block;
    padding-top: 100%;
}

추가 고려 사항

• 사각형 안의 텍스트를 중앙에 배치하려면 디스플레이를 사용할 수 있습니다: flex; justify-content가 있는 속성: center; 및 align-items: center;.
• padding-bottom 트릭은 오래된 브라우저에서 신뢰할 수 없는 결과를 제공할 수 있습니다.
• 일관된 정사각형 종횡비를 보장하려면 콘텐츠 요소를 정사각형 안에 절대적으로 배치하세요.

위 내용은 CSS 그리드와 Flexbox: 반응형 사각형을 만드는 데 가장 적합한 것은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!