由於筆記 08提到了 repeat ，此 function 的設定與其內元素的大小設定，以及元素內容文字的大小影響是如何，其自動計算又是以哪個為依據？此篇主要探討此方向。

Demo | Github

Sizing Grid Items

建立多筆項目，並使用 repeat 與 fr 來自動分配

<div class="container">
  <div class="item item1">1</div>
  ...
</div>

1	grid-template-columns: repeat(5, 1fr);

此時各項 item 應該都是同一大小，產生 5 欄的表格

現在針對 item9 這一項目建立 class ，並給予寬度設定 500px ，會發現 repeat 中設定的 1fr 失去效果了；

.item9 {
    background: mistyrose;
    width: 500px;
}

或是直接針對 html 去變更 item9 的內容，將內容文字加長， 1fr 的設定也會失效；這是因為 fr 是依據表格設定後，剩餘的空間進行分配，所以當設定了寬度，或是內容文字，都會先行在表格中進行分配

1	<div class="item item9">9asadfbasdfzxcvmnmqweruiopytkjl;</div>

展示跨行/欄的屬性，當跨越的行/列在 repeat 的範圍內的時候，表格會依據行列的限制給予設定是否換行；反之要是超出了行/欄的設定，則會依照跨越的設定，自動增加行/欄

.item9 {
    background: mistyrose;
    grid-column: span 10;
    grid-row: span 2;
}

筆記與備註事項

grid-column

The grid-column CSS property is a shorthand property for grid-column-start and grid-column-end specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
資料來源 - MDN

grid-row

The grid-row CSS property is a shorthand property for grid-row-start and grid-row-end specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
資料來源 - MDN

ShunNien's Blog

CSS Grid 筆記 09-Sizing Grid Items

Sizing Grid Items

筆記與備註事項

grid-column

grid-row

參考資料