그리드 레이아웃은 유연한 크기(flex-size)를 지원하는데 이는 좋은 적응형 레이아웃 기술입니다.
유연한 크기 조정은 fr 크기 단위를 사용합니다. 이 단위는 "분수" 또는 "분수 단위"라는 단어의 처음 두 글자에서 유래하며 전체 공간의 일부를 나타냅니다.
예를 들어 다음 CSS 규칙:
grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
은 4개의 열이 있음을 의미하고, 첫 번째 열은 100px 고정 크기이고, 세 번째 열 max-content는 넘치거나 줄바꿈하지 않고 요소만 포함하는 크기를 의미하고, 나머지 2개는 열은 모두 유연한 크기입니다.
탄성 크기 계산 규칙에 따라 둘은 남은 사용 가능한 공간을 균등하게 나눕니다(이 두 열의 탄성 계수는 동일하며 둘 다 1입니다).
CSS3 데모 코드:
#grid {
display: grid;
width: 100%;
grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
}
#title {
background-color: lime;
}
#score {
background-color: yellow;
}
#stats {
background-color: lime;
}
#message {
background-color: orange;
}
p {
height: 80px;
line-height: 80px;
text-align: center;
}
HTML 코드:
<p id="grid">
<p id="title">Site Logo</p>
<p id="score">Slogan</p>
<p id="stats">User Zone</p>
<p id="message">Message</p>
</p>관련 권장 사항:
위 내용은 CSS3 적응형 레이아웃 기술 유연한 크기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
