精品免费在线观看-精品欧美-精品欧美成人bd高清在线观看-精品欧美高清不卡在线-精品欧美日韩一区二区

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@}
返回頂部
主站蜘蛛池模板： 国产毛片一级 | 韩国深夜福利视频19禁在线观看 | 精品欧美一区二区三区 | 国产成人宗合 | 国产日韩精品视频 | 日本特黄的免费大片视频 | 在线高清一级欧美精品 | 国产精品久久久久9999赢消 | 亚洲精品15p| 国产乱人伦精品一区二区 | 欧美视频在线观看网站 | 免费看国产一级特黄aa大片 | 婷婷精品视频 | 久久中文亚洲国产 | 尤物国产在线精品福利一区 | 亚洲 欧美 日韩在线综合福利 | 欧美综合精品一区二区三区 | 国产一级做a爰片在线看免费 | 久久久精品久久久久久久久久久 | 婷婷综合久久狠狠色99h | 日韩欧美国产一区二区三区 | 在线观看亚洲专区 | 国产精品亚洲片在线花蝴蝶 | 亚洲欧美一区二区三区在线观看 | 欧美一区二区三区大片 | 国产一区二区视频免费 | 91破解版在线 | 亚洲 | 日本精品久久久久中文字幕8 | 久青草久青草高清在线播放 | 亚洲欧美综合人成野草 | 欧美亚洲国产精品久久第一页 | 国产日韩综合 | 国产精品福利视频免费观看 | 欧美一区二区手机在线观看视频 | 91高清视频 | 一区二区三区免费视频网站 | 古代级a毛片在线 | 婷婷综合丁香 | 国产精品一区二区欧美视频 | 国产日韩欧美在线一二三四 | 精品一区二区国语对白 |