css如何使用repeat()函數(shù)

這篇文章將為大家詳細講解有關(guān)css如何使用repeat()函數(shù)，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

repeat()

repeat函數(shù)用來批量處理網(wǎng)格，接收2個參數(shù)，第一個參數(shù)表示執(zhí)行次數(shù)，第二個參數(shù)表示長度?？聪旅胬?/p>

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
    </div>

      .repeat-wrapper {
        margin-top: 100px;
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-gap: 10px;
      }

效果

grid-template-columns: repeat(3, 100px) 等價于 grid-template-columns: 100px 100px 100px;

auto-fill,auto-fit

第一個參數(shù)除了指明具體次數(shù)外，repeat還接收這幾個參數(shù) auto-fill,auto-fit，下面講一講這兩個參數(shù)的概念。

auto-fill

auto-fill表示由瀏覽器自動根據(jù)項目填充次數(shù)。當(dāng)容器很寬的時候，會自動留出剩余格子的寬度。如果網(wǎng)格容器在相關(guān)軸上具有確定的大小或最大大小，則重復(fù)次數(shù)是最大可能的正整數(shù)，不會導(dǎo)致網(wǎng)格溢出其網(wǎng)格容器。

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 4444</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 444</div>
    </div>

grid-template-columns: repeat(auto-fill, minmax(100px,1fr));

效果

auto-fit

auto-fit也會自動計算，但是與auto-fill不同的是，auto-fit不會保留剩余的空格子，會將auto-fill剩余的空格子重新分配到每個格子中?？聪旅媸纠?/p>

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 4444</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 444</div>
    </div>

grid-template-columns: repeat(auto-fit, minmax(100px,1fr));

效果

兼容性

最新版本的主流瀏覽器基本都能支持，依舊不支持ie。

關(guān)于“css如何使用repeat()函數(shù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。