登录 | 立即注册
开启辅助访问
软件源码编程教程

17站长网

17站长网 › 首页 ›编程教程› CSS3教程 › 查看内容

CSS3教程

Grid 行和列

media 媒体查询►◄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@}
media 媒体查询►◄Grid 布局简介
关于17站长网
致力于有效地持续为站长提供全面的站长信息，帮助站长转型升级，为互联网创业者提供更加优质的创业信息和品牌营销服务，与站长一起进步！
全力以赴为站长服务的站长网！！
关于我们联系我们寻求报道
商务合作投稿须知版权声明
开通VIP
联系我们
官方客服QQ：492214323
举报投诉邮箱：492214323@qq.com
© 2015-2020 合肥一七推网络科技有限公司 版权所有 皖ICP备14001855号-15  本站内容来自互联网和网友会员发布，观点仅代表作者本人。如发现有涉嫌侵权/违法的内容，请发送邮件举报。|网站地图
返回顶部