CSS만 사용하여 마지막 행이 왼쪽 정렬된 가운데 그리드를 만드는 방법은 무엇입니까?

Flexbox 없이 마지막 행이 왼쪽으로 정렬된 가운데 그리드

인라인 블록 디스플레이가 포함된 CSS

최소한의 마크업과 CSS를 사용하면 구현 및 사용자 정의가 다양해집니다.

왼쪽 정렬 마지막 행의 경우 열이 브라우저 너비에 따라 동적으로 변하는 중앙 그리드에서는 CSS가 Flexbox를 사용하지 않고도 이 효과를 얻을 수 있습니다.

코드는 다음과 같습니다.

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}

<div>

이 솔루션은 자동으로 그리드의 수를 조정합니다. 중앙 정렬을 유지하고 마지막 행을 왼쪽 정렬하면서 사용 가능한 브라우저 너비를 기준으로 열과 행을 조정합니다. IE9과 호환되어 프로덕션 환경에 구현하기에 적합합니다.

위 내용은 CSS만 사용하여 마지막 행이 왼쪽 정렬된 가운데 그리드를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!