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

創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、陳倉網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為陳倉等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

fit-content()

fit-content函數(shù)，接收一個(gè)參數(shù)，長度值，可以按照字面意思來解釋他的作用，"適應(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)容長度大于給定長度時(shí)，文字會(huì)自動(dòng)換行，不會(huì)超過給定長度，當(dāng)內(nèi)容長度小于給定長度時(shí)，會(huì)按照給定的內(nèi)容長度設(shè)置長度。

兼容性

兼容性對(duì)于現(xià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)容短和最長的內(nèi)容長度?？聪旅姘咐?/p>

    <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)容長度</p>
      </div>
      <div class="minmax-item">
        <p>test</p>
        <p>test 232232323233222222</p>
        <p>max-content采用最長的內(nèi)容長度</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í)，表示列寬較大的寬度也不能超過第一個(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ì)超過第三個(gè)p標(biāo)簽的寬度

兼容性

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

repeat()

repeat函數(shù)用來批量處理網(wǎng)格，接收2個(gè)參數(shù)，第一個(gè)參數(shù)表示執(zhí)行次數(shù)，第二個(gè)參數(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) 等價(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：CSS的網(wǎng)格函數(shù)有哪些-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://aaarwkj.com/article42/ccdehc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、虛擬主機(jī)、小程序開發(fā)、品牌網(wǎng)站制作、網(wǎng)站維護(hù)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)