試一試
grid-template-columns: fit-content(8ch) fit-content(8ch) 1fr;
grid-template-columns: fit-content(100px) fit-content(100px) 1fr;
grid-template-columns: fit-content(40%) fit-content(40%) 1fr;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">
<div>One. This column has more text in it.</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
display: grid;
grid-gap: 10px;
width: 250px;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
text-align: left;
}
該函式可以用作 CSS Grid 屬性中的軌道尺寸，其中最大尺寸由 max-content 定義，最小尺寸由 auto 定義，其計算方式類似於 auto（即 minmax(auto, max-content)），但如果軌道尺寸大於 auto 的最小尺寸，則會將其限制在 *引數* 值。
有關 max-content 和 auto 關鍵字的更多資訊，請參閱 grid-template-columns 頁面。
fit-content() 函式還可以用作 width、height、min-width、min-height、max-width 和 max-height 的佈局框尺寸，其中最大尺寸和最小尺寸指的是內容尺寸。
語法
css
/* <length> values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)
/* <percentage> value */
fit-content(40%)
值
<length>-
一個絕對長度。
<percentage>-
相對於給定軸上可用空間的百分比。
在網格屬性中，它相對於列軌道中網格容器的內聯尺寸，以及行軌道中網格容器的塊尺寸。否則，它相對於佈局框的可用內聯尺寸或塊尺寸，具體取決於書寫模式。
正式語法
<fit-content()> =
fit-content( <length-percentage [0,∞]> )
<length-percentage> =
<length> |
<percentage>
示例
使用 fit-content 調整網格列大小
HTML
html
<div id="container">
<div>Item as wide as the content.</div>
<div>
Item with more text in it. Because the contents of it are wider than the
maximum width, it is clamped at 300 pixels.
</div>
<div>Flexible item</div>
</div>
CSS
css
#container {
display: grid;
grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
結果
規範
| 規範 |
|---|
| CSS 網格佈局模組 Level 2 # funcdef-grid-template-columns-fit-content |
| CSS Box Sizing Module Level 3 # funcdef-width-fit-content |
瀏覽器相容性
css.properties.grid-template-columns.fit-content
載入中…
css.properties.width.fit-content_function
載入中…