[Day22] grid-auto 屬性之 rows/columns

12th鐵人賽 css grid

placeholder name

2020-10-07 22:38:14

2228 瀏覽

如果沒有給予明確指定網格項目位置，網格項目會自動加入網格內，前面已經了解到很多網格線的操控方式，但那些沒有被操控的、自動生成的、預設的網格線段和區域，要怎麼去操控這些東西呢？這時就要使用到 grid-auto 有關的屬性

grid-auto-rows & columns

.container {
    grid-auto-rows: <track-size> ;
    grid-auto-columns: <track-size> ;
}
預設：auto

<track-size> 包括 auto | <length> | <percentage> | fr | min-content | max-content | minmax() | fix-content()

範例

<style>
.container{
  display: inline-grid;
  grid-auto-flow: row;
  grid-template-columns: 80px 80px;
  grid-template-rows: 80px 80px;
  grid-auto-rows: auto; /*改變屬性值看看變化*/
  background-color: #a5def5;
}
.item {
  width: 40px;
  height: 40px;
  margin: 5px;
  color: white;
  background-color: #00A0E9;
}
</style>
<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
  </div>
</body>

有時網格項目因為尺寸、數量會超過網格容器，這些網格項目的指定位置變成在網格容器之外，為了滿足版型需求、不讓網格項目超出網格區域邊界，瀏覽器會自動額外加入列或行來放置項目。

如果網格區域不夠呢？剩下的尺寸要會自然地被伸展開來填充網格容器

這些額外的或自動的網格尺寸就需要用到這個屬性來控制尺寸。如果不指定這兩個屬性，瀏覽器會自行根據網格裡的內容的大小數量，自行決定新增網格的列、行還有尺寸。