CSS3 adaptive layout technology flexible size

Grid layout supports flexible size (flex-size), which is a good adaptive layout technology.

Flexible dimensions use fr size units, which come from the first two letters of the word "fraction" or "fractional unit" and represent a portion of the overall space.

For example, the following CSS rule:

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

means there are 4 columns, the first column is 100px fixed size, the third column max-content means the size that just contains the elements without overflowing or wrapping, and the rest The 2 columns are both flexible sizes.

According to the calculation rules of elastic size, the two will divide the remaining available space equally (the elastic coefficients of these two columns are equal, both are 1).

CSS3 demonstration 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">Slogan</p>
    <p id="stats">User Zone</p>
    <p id="message">Message</p>
</p>

Related recommendations:

Detailed explanation of elastic layout

Flexible Layout

css3 Flexible Layout

The above is the detailed content of CSS3 adaptive layout technology flexible size. For more information, please follow other related articles on the PHP Chinese website!