Elastic dimensions of CSS3 Adaptive layout Technology

The grid layout supports elastic dimensions (flex-size), which is a good adaptive layout technique.

The Elastic dimensions use fr dimension units, which come from the first two letters of the word "fraction" or "fractional unit", representing part of the overall space.

For example, the following CSS rules:

grid-template-columns:100px 1fr max-content Minmax (min-content, 1FR);

Indicates that there are 4 columns, the first column is 100px fixed size, the third column max-content represents just the dimension that contains the element does not overflow, and the remaining 2 columns are elastic dimensions.

According to the calculation rules for elastic dimensions, the remaining free space is evenly spaced (both columns have an equal elastic factor of 1).

CSS3 Demo Code:

#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 code:

<p id= "grid" > <p id= "title" >site logo</p> <p id= "Score" &G T slogan</p> <p id= "stats" >user zone</p> <p id= "message" >MESSAGE</P></P>