←Grid 布局简介

media 媒体查询→

Grid 行和列

开始学习 Grid 的第一件事情就是划格子，本章主要给大家讲解如何画格子。掌握好这个掌握好这个技能是学习 Grid 布局的基础。

grid-template-columns 该是基于网格列. 的维度，去定义网格线的和网格轨道的尺寸大小。
grid-template-rows 该是基于网格行的维度，去定义网格线的和网格轨道的尺寸大小。
repeat() 表示轨道列表的重复片段，允许以更紧凑的形式写入大量重复模式的列或行。
auto-fill和 auto-fit 规定如何填充列（是否进行协调）。
fr fr 单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字例分配。
minmax() 定义了长宽范围的闭区间，它与 CSS 网格布局一起使用。
grid-auto-columns 指定了隐式创建的网格纵向轨道（track）的宽度
grid-auto-rows 用于指定隐式创建的行轨道大小。

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 之间。

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

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

语法：

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

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

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

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

<div class="demo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

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

图

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

<div class="demo">
    <div class="item">1</div>
    <div class="item">2</div>       
</div>

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

图

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

<div class="demo">
    <div class="item">1</div>
    <div class="item">2</div>  
    <div class="item">3</div>      
</div>

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

图

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

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

图

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

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

图

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

说明：我们容器里面有 3 个项目而只设定了第一行的高度因此，第 2 行的高度是撑开的高度。

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

图

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

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

图

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

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

图

也可以用小数。

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

图

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

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

图

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

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

图

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

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

图

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

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

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

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

它们的规则是范围，左边是最小值，右侧是最大值。

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

.demo{
    grid-template-columns:repeat(,minmax(px,px) px px);
}

←Grid 布局简介

media 媒体查询→

Grid 行和列

您的鼓励是对我最大的支持