亚洲国产精品人久久,亚洲va国产日韩欧美精品色婷婷,久久久久88色偷偷,免费人成黄页在线观看国际

17站長網

17站長網 › 首頁 ›編程教程› CSS3教程 › 查看內容

Grid 行和列

grid-template|auto/rows(行)|columns (列)

開始學習 Grid 要做的第一件事情就是劃格子，本章主要給大家講解如何畫格子。掌握好這個掌握好這個技能是學習 Grid 布局的基礎。

1. 官方定義

grid-template-columns 該屬性是基于 網格列. 的維度，去定義網格線的名稱和網格軌道的尺寸大小。
grid-template-rows 該屬性是基于 網格行 的維度，去定義網格線的名稱和網格軌道的尺寸大小。
repeat() 函數表示軌道列表的重復片段，允許以更緊湊的形式寫入大量顯示重復模式的列或行。
auto-fill和 auto-fit 屬性規定如何填充列（是否進行協調）。
fr fr 單位被用于在一系列長度值中分配剩余空間，如果多個已指定了多個部分，則剩下的空間根據各自的數字按比例分配。
minmax() 定義了一個長寬范圍的閉區間， 它與 CSS 網格布局一起使用。
grid-auto-columns 指定了隱式創建的網格縱向軌道（track）的寬度
grid-auto-rows 用于指定隱式創建的行軌道大小。

2. 解釋

grid-template-columns 網格的列的寬度，我們可以理解為項目的寬度，這樣更容易學習。
grid-template-rows 網格行的高度，我們同樣可以理解為項目的高度。
grid-auto-columns 超出定義的列后，多于沒有定義的列寬。
grid-auto-rows 超出定義的行后，多于的行高。
repeat(number,length) 這是 Grid 布局中用到的函數它接受兩個參數分別是 number 代表重復數量和 length代表寬度或高度的值。它也可以代表重復的模式，例如 repeat(2, 100px 200px 300px)實際就是 100px 200px 300px 100px 200px 300px。
auto-fill 如同它字面的意思,自動規劃多余空間內項目填充，這里要注意的是它和 auto 自適應寬度是不同的。
auto-fit
fr 代表倍數關系，它數字部分都是整數例如 1fr 2fr 后面是前面的兩倍。
minmax() 代表一個長度范圍例如 minmax(10px, 100px) 就是這個長度是 10px ~ 100px 之間。

3. 語法

grid-template-columns@H_301_98@:none | px |  | em| rem | fr | auto| minmax@H_301_98@(min,max@H_301_98@) | auto| repeat@H_301_98@;
grid-template-rows@H_301_98@:none | px |  | em| rem | fr | auto| minmax@H_301_98@(min,max@H_301_98@) | auto| repeat@H_301_98@;
grid-auto-columns@H_301_98@:none | px |  | em| rem | fr | auto| minmax@H_301_98@(min,max@H_301_98@) | auto| @H_301_98@;
grid-auto-rows@H_301_98@:none | px |  | em| rem | fr | auto| minmax@H_301_98@(min,max@H_301_98@) | auto| @H_301_98@;

說明：grid-template-columns 和 grid-template-rows 接受多個值，并且它們可以混合使用。grid-auto-columns 和 grid-auto-rows 接受 1 個值。

函數語法：

grid-template-rows@H_301_98@:repeat@H_301_98@(,px rem em,fr@H_301_98@)

說明：repeat的意思是重復，上面的意思每 4 行的高度分別是 10px 1rem 1em,1fr 一共重復 2 次，共 8 行。

grid-template-rows@H_301_98@: px minmax@H_301_98@(px,px@H_301_98@)

說明：minmax 的意思是取最大和最小，上面的意思是第 2 行的高度最小是 40px 最大是 60px.

4. 兼容性

IEEdgeFirefoxChromeSafariOperaiosandroid
No16+52+57+10.1+44+10.3+81

5. 實例

  1. none 不明確網格，列數和寬度行數和高度都由 grid-auto-flow 屬性隱式指定。這樣寫他們將排成1列因為我們沒有規定列寬。

@H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>4@H_301_98@</div@H_301_98@>
@H_301_98@</div@H_301_98@>
.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: none@H_301_98@;
    grid-template-rows@H_301_98@:none@H_301_98@;
    grid-auto-columns@H_301_98@: px@H_301_98@; 
    grid-auto-rows@H_301_98@: px@H_301_98@;   
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;          
@H_301_98@}

效果圖

編程之家

`none`不明確網格效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: px px@H_301_98@;
            grid-template-rows@H_301_98@:none@H_301_98@;            
            grid-auto-rows@H_301_98@: px@H_301_98@;   
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;          
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(3)@H_301_98@{
            background@H_301_98@: purple@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(4)@H_301_98@{
            background@H_301_98@: yellowgreen@H_301_98@;
        @H_301_98@}
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>4@H_301_98@</div@H_301_98@>
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

  1. 設置一個左 100px 右側自適應的左右布局。

@H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>       
@H_301_98@</div@H_301_98@>
.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: px auto@H_301_98@;   
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;          
@H_301_98@}

效果圖

編程之家

`none`不明確網格效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: px auto@H_301_98@;   
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;          
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}        
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>       
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

  1. 設置一個左 100px 中自適應右側 100px 的左中右布局。

@H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>  
    @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>      
@H_301_98@</div@H_301_98@>
.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: px auto px@H_301_98@;   
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;          
@H_301_98@}

效果圖

編程之家

左中右布局效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: px auto px@H_301_98@;   
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;          
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}        
        .item:nth-of-type(3)@H_301_98@{
            background@H_301_98@: purple@H_301_98@;
        @H_301_98@}
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>  
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>    
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

  1. 為上面的布局設置一個固定的行高。

.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: px auto px@H_301_98@;   
    grid-template-rows@H_301_98@: px@H_301_98@;   
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;          
@H_301_98@}

效果圖

編程之家

固定的行高效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: px auto px@H_301_98@;   
            grid-template-rows@H_301_98@:px@H_301_98@;
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;          
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}        
        .item:nth-of-type(3)@H_301_98@{
            background@H_301_98@: purple@H_301_98@;
        @H_301_98@}
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>  
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>    
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

  1. 修改上面的布局為兩列，其中只設定一行高度。

.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: px px@H_301_98@;   
    grid-template-rows@H_301_98@: px@H_301_98@;   
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;          
@H_301_98@}

效果圖

編程之家

只設定一個行高效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: px px@H_301_98@;   
            grid-template-rows@H_301_98@: px@H_301_98@;              
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;          
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}        
        .item:nth-of-type(3)@H_301_98@{
            background@H_301_98@: purple@H_301_98@;
        @H_301_98@}
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>  
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>    
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

說明：我們容器里面有 3 個項目 而只設定了第一行的高度因此，第 2 行的高度是文字撐開的高度。

  1. 讓每行的高度為 100px 。

.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: px px@H_301_98@;   
    grid-auto-rows@H_301_98@: px@H_301_98@;   
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;          
@H_301_98@}

效果圖

編程之家

多于行設置行高效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: px px@H_301_98@;              
            grid-auto-rows@H_301_98@:px@H_301_98@;
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;          
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}        
        .item:nth-of-type(3)@H_301_98@{
            background@H_301_98@: purple@H_301_98@;
        @H_301_98@}
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>  
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>    
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

  1. 使用 minmax() 讓其第二列的寬度在 100px 到 200px 之間。

.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: px minmax@H_301_98@(px,px@H_301_98@)@H_301_98@;   
    grid-auto-rows@H_301_98@: px@H_301_98@;   
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;          
@H_301_98@}

效果圖

編程之家

minmax() 函數效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: px minmax@H_301_98@(px,px@H_301_98@)@H_301_98@;   
            grid-auto-rows@H_301_98@:px@H_301_98@;
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;          
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}        
        .item:nth-of-type(3)@H_301_98@{
            background@H_301_98@: purple@H_301_98@;
        @H_301_98@}
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>  
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>    
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

  1. 使用 fr 把容器分為 3 等列。

.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: fr fr fr@H_301_98@;   
    grid-auto-rows@H_301_98@: px@H_301_98@;   
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;          
@H_301_98@}

效果圖


編程之家

fr 函數效果圖

也可以用小數。

.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: fr fr fr@H_301_98@;   
    grid-auto-rows@H_301_98@: px@H_301_98@;   
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;          
@H_301_98@}

效果圖

編程之家

用小數 fr 效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: fr fr fr@H_301_98@;   
            grid-auto-rows@H_301_98@:px@H_301_98@;
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;          
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}        
        .item:nth-of-type(3)@H_301_98@{
            background@H_301_98@: purple@H_301_98@;
        @H_301_98@}
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>  
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>    
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

  1. 使用 repeat 函數。

.demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: repeat@H_301_98@(,px@H_301_98@)@H_301_98@;
    grid-auto-rows@H_301_98@:px@H_301_98@;
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;       
        
@H_301_98@}

效果圖

編程之家

使用 repeat 函數效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: repeat@H_301_98@(,px@H_301_98@)@H_301_98@;
            grid-auto-rows@H_301_98@:px@H_301_98@;
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;       
               
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}        
        .item:nth-of-type(3)@H_301_98@{
            background@H_301_98@: purple@H_301_98@;
        @H_301_98@}
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>  
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>    
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

  1. auto-fill 自動填充規劃剩余空間的項目

.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: repeat@H_301_98@(auto-fill,px@H_301_98@)@H_301_98@;
    grid-auto-rows@H_301_98@:px@H_301_98@;
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;       
        
@H_301_98@}

效果圖

編程之家

使用 auto-fill 效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: repeat@H_301_98@(auto-fill,px@H_301_98@)@H_301_98@;
            grid-auto-rows@H_301_98@:px@H_301_98@;
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;       
               
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}        
        .item:nth-of-type(3)@H_301_98@{
            background@H_301_98@: purple@H_301_98@;
        @H_301_98@}
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>  
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>    
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

  1. auto-fit 自動規劃多余空間。

.demo@H_301_98@{
    display@H_301_98@:grid@H_301_98@;
    grid-template-columns@H_301_98@: repeat@H_301_98@(auto-fit,px@H_301_98@)@H_301_98@;
    grid-auto-rows@H_301_98@:px@H_301_98@;
    color@H_301_98@:#fff@H_301_98@;
    text-align@H_301_98@: center@H_301_98@;       
        
@H_301_98@}

效果圖

編程之家

使用 auto-fit 效果圖
<!DOCTYPE html>
@H_301_98@<html lang@H_301_98@=@H_301_98@"en@H_301_98@"@H_301_98@>
@H_301_98@<head@H_301_98@>
    @H_301_98@<Meta charset@H_301_98@=@H_301_98@"UTF-8@H_301_98@"@H_301_98@>
    @H_301_98@<Meta name@H_301_98@=@H_301_98@"viewport@H_301_98@" content@H_301_98@=@H_301_98@"width=device-width, initial-scale=1.0@H_301_98@"@H_301_98@>
    @H_301_98@<title@H_301_98@>Document@H_301_98@</title@H_301_98@>
    @H_301_98@<style@H_301_98@>
        .demo@H_301_98@{
            display@H_301_98@:grid@H_301_98@;
            grid-template-columns@H_301_98@: repeat@H_301_98@(auto-fit,px@H_301_98@)@H_301_98@;
            grid-auto-rows@H_301_98@:px@H_301_98@;
            color@H_301_98@:#fff@H_301_98@;
            text-align@H_301_98@: center@H_301_98@;       
               
        @H_301_98@}
        .item:nth-of-type(1)@H_301_98@{
            background@H_301_98@: red@H_301_98@;
        @H_301_98@}
        .item:nth-of-type(2)@H_301_98@{
            background@H_301_98@: green@H_301_98@;
        @H_301_98@}        
        .item:nth-of-type(3)@H_301_98@{
            background@H_301_98@: purple@H_301_98@;
        @H_301_98@}
    @H_301_98@</style@H_301_98@>
@H_301_98@</head@H_301_98@>
@H_301_98@<body@H_301_98@>
    @H_301_98@<div class@H_301_98@=@H_301_98@"demo@H_301_98@"@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>1@H_301_98@</div@H_301_98@>
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>2@H_301_98@</div@H_301_98@>  
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>   
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>   
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>   
        @H_301_98@<div class@H_301_98@=@H_301_98@"item@H_301_98@"@H_301_98@>3@H_301_98@</div@H_301_98@>    
    @H_301_98@</div@H_301_98@>
@H_301_98@</body@H_301_98@>
@H_301_98@</html@H_301_98@>

小結

  1. auto-fill 和 auto-fit 雖然都是自動畫出布局，但是還是有一定區別：
    假如一個容器內有 3 個項目 這時候有多余的空間可以去填 4 個項目，auto-fill 會在剩余空間畫一個空的項目位置，而 auto-fit 則不會。

  2. fr 可以和其它的數值混用，例如：

.demo@H_301_98@{
    grid-template-columns@H_301_98@: fr fr px rem@H_301_98@;
@H_301_98@}

3 minmax() 中的值也可以使用 fr，例如：

.demo@H_301_98@{
    grid-template-columns@H_301_98@: minmax@H_301_98@(fr,fr@H_301_98@)@H_301_98@;
@H_301_98@}

它們的規則是一個范圍，左邊是最小值，右側是最大值。

  1. repeat() 函數用來設定 Grid 重復的軌道，內部同樣可以嵌套多個值，例如：

repeat() 和 minmax() 一起使用：

.demo@H_301_98@{
    grid-template-columns@H_301_98@:repeat@H_301_98@(,minmax@H_301_98@(px,px@H_301_98@) px px@H_301_98@)@H_301_98@;
@H_301_98@}
返回頂部
亚洲国产精品人久久,亚洲va国产日韩欧美精品色婷婷,久久久久88色偷偷,免费人成黄页在线观看国际
日韩成人一级大片| 最新国产精品久久精品| 国产精品一区在线观看你懂的| 一区二区三区在线视频免费| 国产无人区一区二区三区| 在线观看中文字幕不卡| 色视频成人在线观看免| 99精品视频在线观看免费| av高清不卡在线| 99久免费精品视频在线观看 | 国产主播一区二区三区| 免费看日韩精品| 精品一区二区精品| 久久精品国产99| 国产一区二区精品久久99| 国产成人自拍在线| av不卡免费在线观看| 色综合网站在线| 欧美嫩在线观看| 久久亚洲私人国产精品va媚药| 久久亚洲一区二区三区明星换脸| 国产亚洲人成网站| 亚洲免费观看高清完整版在线观看 | 91精品国产综合久久精品图片 | 日本不卡免费在线视频| 经典三级视频一区| 成人ar影院免费观看视频| 欧美网站大全在线观看| 欧美xxxx老人做受| 亚洲女厕所小便bbb| 免费观看一级特黄欧美大片| 成人网在线免费视频| 欧美视频在线观看一区| 久久影视一区二区| 一区二区三区不卡视频在线观看| 日韩av一区二| 99精品一区二区| 久久亚区不卡日本| 午夜影视日本亚洲欧洲精品| 粉嫩嫩av羞羞动漫久久久| 欧美日韩黄视频| 自拍偷在线精品自拍偷无码专区 | 日韩你懂的在线播放| 综合久久综合久久| 国产aⅴ精品一区二区三区色成熟| 在线观看欧美日本| 亚洲国产精品传媒在线观看| 麻豆精品国产传媒mv男同| 91福利资源站| 中文字幕一区三区| 国产精品一区二区免费不卡| 欧美三日本三级三级在线播放| 久久精子c满五个校花| 免费人成在线不卡| 欧美一区二区免费视频| 亚洲在线视频网站| 91国产福利在线| 亚洲男人的天堂av| 91色porny在线视频| 国产精品乱子久久久久| 国产suv精品一区二区三区| 久久精品一区二区| 国产精品一区二区三区网站| 久久久久高清精品| 国内一区二区在线| 国产亚洲欧美日韩在线一区| 国产精品白丝av| 欧美国产日本韩| 91伊人久久大香线蕉| 亚洲精品乱码久久久久久| 在线一区二区三区四区五区| 亚洲国产精品久久久久婷婷884| 91蜜桃网址入口| 午夜日韩在线电影| 日韩视频一区二区三区在线播放| 日韩和欧美一区二区三区| 日韩视频免费观看高清完整版| 毛片基地黄久久久久久天堂| 久久你懂得1024| 99免费精品在线| 日韩福利视频网| 久久精品人人做人人综合 | 国产精品久久久久桃色tv| 91美女在线看| 麻豆精品国产传媒mv男同| 国产肉丝袜一区二区| 色综合天天综合网天天狠天天 | 激情欧美日韩一区二区| 欧美激情中文字幕| 欧美午夜宅男影院| 韩国午夜理伦三级不卡影院| 国产精品久久久久国产精品日日| 欧洲国产伦久久久久久久| 蜜桃精品视频在线| 亚洲欧美一区二区久久| 日韩精品一区二区三区老鸭窝 | 亚洲色图丝袜美腿| 日韩一区二区免费在线观看| 99久久免费视频.com| 免费在线一区观看| 亚洲自拍欧美精品| 国产区在线观看成人精品 | www.日韩在线| 精品一区二区日韩| 免费成人你懂的| 亚洲第四色夜色| 17c精品麻豆一区二区免费| 91精品福利在线一区二区三区| 91伊人久久大香线蕉| 大白屁股一区二区视频| 久久国产麻豆精品| 日日欢夜夜爽一区| 亚洲va欧美va国产va天堂影院| 1区2区3区欧美| 国产精品福利影院| 国产精品欧美久久久久一区二区| 精品国产一区二区三区av性色| 欧美日韩综合在线| 欧洲精品在线观看| 91免费版在线| 在线观看三级视频欧美| 色综合久久中文综合久久97| voyeur盗摄精品| 99亚偷拍自图区亚洲| thepron国产精品| 一本一本大道香蕉久在线精品| a4yy欧美一区二区三区| 一本大道av一区二区在线播放| 风间由美一区二区av101| 国产69精品久久久久毛片| 成人丝袜视频网| 97se亚洲国产综合自在线不卡 | 2021久久国产精品不只是精品| 欧美v亚洲v综合ⅴ国产v| 91精品婷婷国产综合久久性色| 精品久久免费看| 国产人成亚洲第一网站在线播放| 国产精品久久精品日日| 亚洲啪啪综合av一区二区三区| 亚洲一区二区三区激情| 日韩精品免费专区| 国产另类ts人妖一区二区| av电影天堂一区二区在线| 欧美日韩精品久久久| 亚洲精品在线一区二区| 国产精品美女久久久久高潮| 亚洲猫色日本管| 美女视频网站黄色亚洲| 国产99久久久国产精品| 日本福利一区二区| 精品乱码亚洲一区二区不卡| 中文字幕av一区二区三区高| 亚洲一区二区四区蜜桃| 国产在线不卡一卡二卡三卡四卡| 波多野结衣一区二区三区| 欧美一卡二卡在线| 亚洲同性gay激情无套| 麻豆freexxxx性91精品| 色噜噜狠狠色综合中国| 精品国产在天天线2019| 亚洲.国产.中文慕字在线| 国产不卡在线视频| 欧美三区免费完整视频在线观看| 久久综合中文字幕| 午夜影视日本亚洲欧洲精品| 成人性生交大片免费看中文网站| 3d成人动漫网站| 一区二区在线观看免费| 国产成人在线色| 精品国产91久久久久久久妲己| 亚洲成人动漫一区| 成人黄色电影在线| 国产视频一区二区在线| 另类欧美日韩国产在线| 欧美日韩激情一区二区三区| 亚洲久草在线视频| 不卡一区在线观看| 国产日韩综合av| 福利一区二区在线观看| 国产丝袜欧美中文另类| 国产精品一线二线三线| 久久久久久久久久电影| 黄页网站大全一区二区| 欧美变态凌虐bdsm| 精品一区中文字幕| 2欧美一区二区三区在线观看视频| 视频一区视频二区中文| 欧美精品三级在线观看| 丝袜美腿亚洲综合| 91麻豆精品国产91| 蜜臀av一区二区在线观看| 日韩一区二区三区视频| 欧美在线视频不卡| 视频一区在线视频| 欧美日韩亚洲国产综合| 国产精品久久久久三级| 六月丁香综合在线视频| 欧美一区中文字幕| 韩国av一区二区| 国产亚洲精品资源在线26u|