欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全解析CSS Grid 的 auto-fill 和 auto-fit 內(nèi)容自適應(yīng)

  發(fā)布時間：2025-05-08 14:48:13   作者：xixixin_   我要評論
這篇文章主要介紹了全解析CSS Grid 的 auto-fill 和 auto-fit 內(nèi)容自適應(yīng)的相關(guān)資料，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧

CSS  Grid 的 auto-fill 和 auto-fit

/* 父元素 */
.grid {
  display: grid;
  /* 定義「網(wǎng)格容器」里有多少列，以及每列的寬度 */
  /* repeat 是個「重復函數(shù)」，表示后面的模式會被重復多次 */
  /* auto-fit 是一個特殊值，自動根據(jù)容器寬度，能放下幾個就放幾個，每列都用后面的規(guī)則 */
  /* minmax 也是一個函數(shù)，每列最小 200px，最大可以占 1fr（剩余空間的平分） */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* 子元素 */
.item {
  height: 200px;
  background-color: rgb(141, 141, 255);
  border-radius: 10px;
}

auto-fill 和 auto-fit 區(qū)別

auto-fill：盡可能多地填充列，即使沒有內(nèi)容也會“占位”；

auto-fit：自動適應(yīng)內(nèi)容，能合并多余空列，不占位；

auto-fill 和 auto-fit 適用場景

希望每行有多少內(nèi)容就撐多寬，用 auto-fit；（如：卡片式布局、相冊等）

希望固定列數(shù)，有占位，用auto-fill；（如：表格、日歷等）

到此這篇關(guān)于全解析CSS Grid 的 auto-fill 和 auto-fit 內(nèi)容自適應(yīng)的文章就介紹到這了,更多相關(guān)css grid 自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 前端CSS Grid 布局示例詳解

    CSS Grid 是一種二維布局系統(tǒng)，可以同時控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋
    2025-04-16

  • css grid網(wǎng)格布局(柵格布局)示例代碼+圖文詳解

    CSS Grid布局是一種二維布局系統(tǒng),可以創(chuàng)建復雜的網(wǎng)頁布局,它通過行和列來定義網(wǎng)格,并允許項目跨越多個網(wǎng)格單元,Grid布局提供了多種屬性來控制網(wǎng)格的大小、間距和項目的位置
    2025-01-14

  • CSS Grid 布局在 IE 中不兼容的原因及解決方案

    文章主要探討了CSS Grid布局在Internet Explorer（IE）中的不兼容問題,并提供了具體的解決方案和最佳實踐,文章首先介紹了CSS Grid布局的基本概念和與傳統(tǒng)布局方法的區(qū)別,然
    2024-11-08

  • CSS合并單元格四種方式示例詳解(table/display/flex/grid)

    這篇文章主要介紹了CSS合并單元格四種方式：table/display/flex/grid,table布局仍是實現(xiàn)合并單元格最簡單的方式，grid次之，flex再次，display:table不推薦，本文結(jié)合實例
    2024-02-28

  • css中flexbox和grid的區(qū)別小結(jié)

    本文我們將深入探討css中flexbox和grid的布局,通過了解他們的主要差異，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面
    2023-11-20

  • CSS使用Flex和Grid布局實現(xiàn)3D骰子

    本文主要介紹了CSS使用Flex和Grid布局實現(xiàn)3D骰子，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學
    2022-08-01

  • CSS中使用grid布局實現(xiàn)一套模板多種布局

    這篇文章主要介紹了CSS中使用grid布局實現(xiàn)一套模板多種布局,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-07-11

  • 用CSS Grid布局制作一個響應(yīng)式柱狀圖的實現(xiàn)

    這篇文章主要介紹了用CSS Grid布局制作一個響應(yīng)式柱狀圖的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編
    2020-05-26

  • 解析CSS中的Grid布局完全指南

    這篇文章主要介紹了解析CSS中的Grid布局完全指南的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來
    2019-04-09

  • css中g(shù)rid屬性的使用詳解

    這篇文章主要介紹了css中g(shù)rid屬性的使用詳解的相關(guān)資料，詳細的介紹了grid屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-26

最新評論