CSS的網(wǎng)格函數(shù)有哪些

這篇文章主要介紹CSS的網(wǎng)格函數(shù)有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

CSS中的網(wǎng)格函數(shù)：fit-content()、minmax()、repeat()。

這3個(gè)函數(shù)都只能在網(wǎng)格布局中使用

fit-content()

fit-content函數(shù)，接收一個(gè)參數(shù)，長(zhǎng)度值，可以按照字面意思來(lái)解釋他的作用，"適應(yīng)內(nèi)容"。

<div class="fit-content-wrapper">
  <div class="fit-item item1">test1dsssss3333333 sssssssssssssss sssssssssssssssssss sssssssssssssssssss ssssssssssssssssssss 這是用了fit-content(400px)</div>
  <div class="fit-item item2">test2 這是固定寬度width：400px</div>
  <div class="fit-item item3">test3 這是fit-content(400px)</div>
</div>

  .fit-content-wrapper{
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: fit-content(400px) 400px fit-content(400px);
    grid-gap: 10px;
  }
  .fit-item{
    background-color: rgb(20, 106, 177);
  }

效果

可以看到,當(dāng)內(nèi)容長(zhǎng)度大于給定長(zhǎng)度時(shí)，文字會(huì)自動(dòng)換行，不會(huì)超過(guò)給定長(zhǎng)度，當(dāng)內(nèi)容長(zhǎng)度小于給定長(zhǎng)度時(shí)，會(huì)按照給定的內(nèi)容長(zhǎng)度設(shè)置長(zhǎng)度。

兼容性

兼容性對(duì)于現(xiàn)代瀏覽器沒(méi)有什么問(wèn)題，新版本主流瀏覽器基本都能支持，對(duì)于需要支持ie的項(xiàng)目則不能使用。

minmax()

minmax函數(shù)表示一個(gè)閉區(qū)間范圍[min,max]，當(dāng)值小于等于min時(shí)，值等于min,當(dāng)大于等于max時(shí)，值等于max.

min-content，max-content

minmax函數(shù)接收min-content,max-content參數(shù)，這兩個(gè)參數(shù)表示內(nèi)容最短和最長(zhǎng)的內(nèi)容長(zhǎng)度?？聪旅姘咐?。

    <div class="minmax-wrapper">
      <div class="minmax-item">
        test1dsssss3333333 sssssssssssssss sssssssssssssssssss
        sssssssssssssssssss ssssssssssssssssssss
      </div>
      <div class="minmax-item">
        <p>test2222222222</p>
        <p>test 232232323233</p>
        <p>min-content采用最短的內(nèi)容長(zhǎng)度</p>
      </div>
      <div class="minmax-item">
        <p>test</p>
        <p>test 232232323233222222</p>
        <p>max-content采用最長(zhǎng)的內(nèi)容長(zhǎng)度</p>
      </div>
    </div>

      .minmax-wrapper {
        margin-top: 100px;
        width: 100vw;
        display: grid;
        grid-gap: 10px;
        grid-template-columns:
          minmax(300px, 500px) minmax(50px, min-content)
          minmax(100px, max-content);
      }

效果

可以看到，第二個(gè)項(xiàng)目的最小的內(nèi)容寬度為第二個(gè)項(xiàng)目中的第一個(gè)p標(biāo)簽

當(dāng)設(shè)置成minmax(50px,min-content)時(shí)，表示列寬最大的寬度也不能超過(guò)第一個(gè)p標(biāo)簽的內(nèi)容寬度。

第三個(gè)項(xiàng)目的最大的內(nèi)容寬度為第三個(gè)p標(biāo)簽的內(nèi)容寬度

當(dāng)設(shè)置成minmax(100px,max-content)時(shí)，最大的內(nèi)容寬度不會(huì)超過(guò)第三個(gè)p標(biāo)簽的寬度

兼容性

跟fit-content函數(shù)一樣，不支持ie,但對(duì)主流的現(xiàn)代瀏覽器支持還不錯(cuò)。

repeat()

repeat函數(shù)用來(lái)批量處理網(wǎng)格，接收2個(gè)參數(shù)，第一個(gè)參數(shù)表示執(zhí)行次數(shù)，第二個(gè)參數(shù)表示長(zhǎng)度?？聪旅胬?/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) 等價(jià)于 grid-template-columns: 100px 100px 100px;

auto-fill,auto-fit

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

auto-fill

auto-fill表示由瀏覽器自動(dòng)根據(jù)項(xiàng)目填充次數(shù)。當(dāng)容器很寬的時(shí)候，會(huì)自動(dòng)留出剩余格子的寬度。如果網(wǎng)格容器在相關(guān)軸上具有確定的大小或最大大小，則重復(fù)次數(shù)是最大可能的正整數(shù)，不會(huì)導(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也會(huì)自動(dòng)計(jì)算，但是與auto-fill不同的是，auto-fit不會(huì)保留剩余的空格子，會(huì)將auto-fill剩余的空格子重新分配到每個(gè)格子中?？聪旅媸纠?/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。

以上是“CSS的網(wǎng)格函數(shù)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！