중앙 콘텐츠로 반응형 사각형 그리드를 만드는 방법은 무엇입니까?

Grid of Responsive Squares

이 스택 오버플로 스레드에서 사용자는 수직 및 수평 방향으로 반응형 사각형의 레이아웃을 만드는 방법에 대해 문의합니다. 정렬된 콘텐츠.

기존 솔루션 (2018)

유연한 레이아웃을 생성하기 위한 CSS display: flex 속성과 각각의 콘텐츠를 중앙에 배치하기 위한 align-items: center 및 justify-content: center 속성을 사용하여 제안된 원래 솔루션 정사각형. 반응형 디자인은 미디어 쿼리를 사용하여 구현되었습니다.

<br>.container {<br> display: flex;<br> flex-direction: row;<br> flex-wrap: Wrap; <br> justify-content: space-around;<br>}</p>
<p>.square {<br> 너비: 100px;<br> 높이: 100px;<br> 디스플레이: flex;<br> align-items: center;<br> justify-content: center;<br>}</p>
<p> @media (최대 너비: 768px) {<br> .square {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 50%;

로그인 후 복사

}
}

업데이트된 솔루션(2022)

포함 CSS가 발전함에 따라 정사각형 그리드의 구현을 단순화하는 몇 가지 새로운 속성이 도입되었습니다. 레이아웃:

• 그리드: 컨테이너의 그리드 레이아웃을 정의합니다.
• aspect-ratio: 각 그리드 항목의 가로세로 비율을 지정하여 정사각형을 유지합니다.
• object-fit: 이미지가 사각형 내에 표시되는 방식을 제어하여 중앙 정렬 및 이미지 맞춤이 가능합니다. 행동.

<br>.container {<br> 디스플레이: 그리드;<br> 그리드-템플릿-열: 반복(3, 1fr);<br> 간격: 2 %;<br>}</p>
<p>.square {<br> 종횡비: 1/1;<br> 디스플레이: 플렉스;<br> 정렬 항목: 센터;<br> 정당화 콘텐츠: 센터;<br> 패딩: 5%;<br> 배경색: #1E1E1E;<br> 색상: #fff;<br>}</p>
<p>.square img {<br> 너비: 100%;<br> 높이: 100%;<br> object-fit: contain;<br> object-position: center;<br>}</p>
<p>.square.fullImg {<br> padding: 0 ;<br>}</p>
<p>.square.fullImg img {<br> object-fit:cover;<br>}<br>

최종 결과는 텍스트, 이미지, 목록을 비롯한 다양한 유형의 콘텐츠를 포함할 수 있는 사각형으로 반응형 그리드 레이아웃을 생성합니다. 정렬과 화면비를 유지하면서.

위 내용은 중앙 콘텐츠로 반응형 사각형 그리드를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!