그리드 레이아웃은 유연한 크기(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!