CSS Grid layout: How to make the element width adapt to the content but not exceed the preset width?

CSS Grid layout: cleverly controls element width, taking into account content adaptation and preset limitations

In CSS Grid layouts, precise control of element width is often a challenge. This article will solve a common problem: How to make the Grid element width adapt to the content, but never exceed the preset maximum width?

Problem Description: Assume that a Grid element has a preset width. When the content is short, the element width should be maintained at a preset value; when the content is too long, the element width should be expanded according to the content, and the number of columns should be automatically adjusted by the browser. This effect is difficult to achieve simply using the minmax() function.

Limitations of the minmax() function: minmax() function defines the minimum and maximum width ranges. It can be automatically adjusted when the content width is within the range; but if the content width is less than the minimum value, it will not force the minimum value; if the content width exceeds the maximum value, it will not limit the width.

Solution: To achieve both adaptive and limited widths, you need to combine Grid layout and other CSS properties:

1. Preset initial width: First, set an initial width for the Grid element, for example width: 200px; . This ensures that the element width remains 200px when the content width is less than 200px.

2. grid-template-columns and fr units: In order to automatically expand the element when the content is too long and automatically adjust the number of columns, use grid-template-columns attribute and fr units. fr units represent proportional allocation of remaining space. For example: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); . auto-fit automatically adjusts the number of columns according to the content; minmax(200px, 1fr) ensures that the minimum width of each column is 200px, and allows scaling when it exceeds 200px.

Through the above method, it can be achieved: when the content width is smaller than the preset value, the browser automatically calculates the number of columns based on the content expansion. This cleverly avoids the limitations of the minmax() function, the key is to flexibly use fr units and auto-fit to achieve adaptability.

The above is the detailed content of CSS Grid layout: How to make the element width adapt to the content but not exceed the preset width?. For more information, please follow other related articles on the PHP Chinese website!