다양한 화면 크기에 반응하고 수직 및 수평으로 정렬된 콘텐츠를 포함하는 정사각형 그리드를 표시하는 것은 다음과 같습니다. Flexbox를 일부 구현하여 달성했거나 그리드.
Flexbox를 사용하면 다음과 같이 유연한 그리드를 만들 수 있습니다.
디스플레이: flex;<br> flex-wrap: Wrap;<br> justify-content: space-around;<br> align-content: start;<br>}</p><p>.square {<br> flex-grow: 1;<br> 최대 너비: 200px;<br> 배경색: #f1f1f1;<br> 여백: 10px;<br> 패딩: 20px;<br> 텍스트 정렬: 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">max-width: 100px;}
}
<div class="square">스퀘어 1</div> ;<br> <div> <div class="square">정사각형 3</div><br></div>
또는 그리드 레이아웃을 사용하여 그리드를 더 효과적으로 제어할 수 있습니다. 구조:
디스플레이: 그리드;<br> 그리드-템플릿-열: 반복(자동 맞춤, 최소최대(200px, 1fr)); // 열 수 정의<br> gap: 10px; // 그리드 항목 간의 간격을 정의합니다<br>}</p>
<p>.square {<br> background-color: #f1f1f1;<br> text-align: center;<br> padding: 20px;<br> }스퀘어 1
스퀘어 3
두 Flexbox 모두 및 그리드는 반응형 사각형의 그리드를 생성하는 다양한 방법을 제공합니다. 둘 사이의 선택은 귀하의 특정 요구 사항과 선호도에 따라 달라집니다.
위 내용은 Flexbox 또는 그리드를 사용하여 반응형 사각형 그리드를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
