前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2024年11月20日

小白都觉得好用的CSS布局属性Grid

前面我学习了Flex布局之后感觉是真的爽啊，比之前用浮动，定位方便太多了，之前几十行代码才能写完的布局，用了Flex10行左右就搞定了，今天学了Grid发现比Flex更爽，代码写的还要少，真是太厉害了，现在我把学习的相关知识梳理了一下，给大家分享一下，同时也可以作为我日后复习的笔记。

一、认识Grid属性

1.Grid容器属性：

属性说明：

grid-template-columns 轨道列宽

grid-template-rows 轨道行高

gap 轨道间距

grid-auto-columns 隐式轨道的列宽

grid-auto-rows 隐式轨道的行高

grid-auto-flow 隐式轨道排列方式，默认行优先

1.认识网格容器/网格项目/网格轨道/轨道间距

首先我们写出一个html结构，声明它的样式为网格布局：display:grid;

<div class="container">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
  • 效果图：

由此可见，之前的span元素为行内元素，在声明了网格布局之后，全部变为了块元素。
与之前的flex布局不一样，flex布局是行内元素。

以下是创建了一个2行3列的布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格容器/网格项目/网格轨道/轨道间距</title>
    <style>
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            grid-template-columns: auto;
            grid-template-columns: 10em 10em auto;
            grid-template-rows: 5em 5em;
            gap: 0.5em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
</body>
</html>
  • 效果图：

通过上述案例我可以学习到网格布局的相关属性用法：

  1. 使用display: grid;声明一个网格布局，其中.container称为网格容器，其子元素span称为网格项目。
  2. 设置轨道的列宽：grid-template-columns：10em 10em auto，意思是声明了一个三列的网格布局，auto表示剩下的布局自适应。
  3. 设置轨道的行高：grid-template-rows：5em 5em，意思是声明了一个两行的网格布局，高度都是5em
  4. 设置轨道的间距：gap: 0.5em 0.5em，声明了轨道之间的间距，可以简写成gap:0.5em。
  5. 网格项目：网格容器中的“子元素”，与flex是一样的，默认生成一列N行的容器（N就是项目的数量）。
  • 总结：
  1. 网格容器：由若干个矩形网格单元构成；
  2. 网络项目：网格容器的子元素，必须放在网格单元中；
  3. 网格单元：有“单元格”和“网格区域”两种表现形式；
  4. 网格轨道：由多个网格单元组成，根据排列方向有“行轨”和“列轨”之分；
  5. 轨道间距：容器中轨道之间的间距,有"行轨间距","列轨间距"。

2.自定义项目属性：

grid-area语法：grid-row-start / grid-column-start / grid-row-end / grid-column-end;

编号从左上角开始（1,1）并且是递增的。

相关属性说明：

  • grid-row-start 项目的起始行；
    grid-column-start 项目的起始列；
    grid-row-end 项目的结束行；
    grid-column-end 项目的结束列。

2.自定义项目在容器中的显示位置

首先，还是先创建一个网格布局的html结构：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
</div>

给出以下样式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 轨道列宽 */
    grid-template-columns: repeat(3, 1fr);
    /* 轨道行高 */
    grid-template-rows: 5em 5em;
    /* 行优先时要设置隐式轨道的行高 */
    grid-auto-rows: 5em;
    /* 轨道间距 */
    gap: 0.5em 1em;
}

.container > .item {
    background-color: lightcyan;
    border: 1px solid #000;
    padding: 0.5em;
}
</style>
  • 效果图：

现在我们以第5个项目来举例，将它移动到第一个网格单元中：

<style>
.container .item:nth-of-type(5) {
    background-color: lightyellow;
    /* item5的默认位置 */
    grid-area: 2 / 2 / 3 / 3;
    /* 将它放入到第一个网格单元中 */
    grid-area: 1 / 1 / 2 / 2;
}
</style>

由于默认项目是跨越一行一列的，所以可以简写成下面的格式：

grid-area: 1 / 2;
  • 效果图：

但是，如果是跨越1行1列以上的，就不能省略了。例如要跨越2行3列，就必须写成下面的格式：

grid-area: 1 / 1 / 3 / 4;

通常的情况是我们只关心跨越几行几列，并不关心它的结束行号，所以还可以这样写：

grid-area: 1 / 1 / span 2 / span 3;

所以，上述两种写法的效果是一样的。

  • 效果图：

再以第1个项目为例，有如下样式：

<style>
    /* 添加一个浅绿色背景便于区分 */
    background-color: lightgreen;
    /* 默认位置 */
    grid-area: 1 / 1 / 2 / 2;
</style>
  • 效果图：

如果现在要跨1行3列，可以写成如下格式：

grid-area: 1 / 1 / span 1 / span 3;

因为item1默认的位置是1 / 1，所以上述样式可以简写成：

grid-area: span 1 / span 3;

之前说过，项目默认的是跨1行1列，所以，可以简写成如下格式：

grid-area: auto / span 3;

由以上案例可以得出结论：

grid-area：参数数量不同，意义不同

1. 值中只有span

  • 单值： 跨的行数。
  • 双值： 跨的行与列数，如果只想设置列数，就必须设置行数（auto—）。

2. 值中有span和编号

  • 双值：没有span，默认跨1行1列，grid-area： 2 / 3；
  • 2.2 三值：省略列结束编号或跨的数量，此时前面的值可使用auto；
  • 2.3 四值：最完整的语法。

3.网格单元尺寸的新单位：fr
设置轨道宽度时可以用一个新单位:fr(fraction)，类似于flex中的伸缩因子。

现有如下网格布局：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
</div>

给出如下样式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 轨道列宽 */
    grid-template-columns: 10em 10em 10em;
    /* 轨道行高 */
    grid-template-rows: 5em 5em;
    /* 轨道间距 */
    gap: 0.5em;
}
</style>
  • 效果图：

此时我们可以在设置轨道宽度的时候使用一个新单位：fr（fraction），类似于flex的伸缩因子

grid-template-columns: auto auto auto;
  • 效果图：

以上属性设置了一个自适应的3列等宽的布局，如果现在出现一个新的需求，中间一列的宽度是两边的二倍，那么auto就无法满足了，但是fr可以完美解决这个问题：

grid-template-columns: 1fr 2fr 1fr;
  • 效果图：
  • 总结：
  1. % 与 fr可以共存，计算方式：总宽度减去百分比宽度，剩下的宽度都分给fr；
  2. px是固定的，em也是固定的，计算时要减去这些固定值，将剩下的空间都分给fr；
  3. auto，fr，% 都是相对单位，都可以触发自动计算机制，尽可能不要同时出现；
  4. auto 与 px，em同时使用会自动计算。

4.网格单元尺寸的常用函数：repeat(),minmax()

还是跟上面案例一样的初始样式，现在如果我要设置一个3列10em宽度的布局，可以利用repeat()函数这样写：


grid-template-columns: repeat(3, 10em);

等价于下面的写法：

grid-template-columns: 10em 10em 10em;

repeat()的第二个参数可以是多个值

grid-template-columns: repeat(3, 10em 2em);

等价于下面的写法：

grid-template-columns: 10em 2em 10em 2em 10em 2em;

repeat()函数还可以与fr混合使用：

grid-template-columns: repeat(2, 1fr) 2fr;

等价于下面的写法：

grid-template-columns: 1fr 1fr 2fr;

3.minmax()函数

中间列，最小宽度是20em，最大宽度是左右的2倍

grid-template-columns: 1fr minmax(20em, 2fr) 1fr;
  • 效果图：
grid-template-columns: 20em minmax(20em, 1fr);
  • 效果图：

当使用1fr时，auto效果也一样，即使写成5fr也是可以的。

grid-template-columns: 20em minmax(20em, 1fr);
grid-template-columns: 20em minmax(20em, 5fr);
grid-template-columns: 20em minmax(20em, auto);

以上三种写法效果完全一样。

  • 效果图：

5.网格单元的排列方式与隐式轨道

现有如下的html结构和样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格单元的排列方式与隐式轨道</title>
    <style>
        /* 网格容器 */
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            display: grid;
            /* 轨道列宽 */
            grid-template-columns: repeat(3, 1fr);
            /* 轨道行高 */
            grid-template-rows: 5em 5em;
            /* 轨道间距 */
            gap: 0.5em 1em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div>
</body>
</html>
  • 效果图：

此时声明的网格单元数量已经不够存放网格项目了，多出的三个项目会自动放入到自动生成的网格空间中了,这时，原来声明的网格单元叫做：显示轨道，新项目显示的轨道称为：隐式轨道。

此时，默认项目在容器中按照先行后列的顺序排列，即：“行优先”。

grid-auto-flow: row;

自动生成的隐式轨道的高度是自动的，因此，行优先时要设置隐式轨道的行高。

grid-auto-rows: 5em;
  • 效果图：

列优先时，需要设置隐式轨道的列宽：

grid-auto-flow: column;
grid-auto-columns: 1fr;
  • 效果图：

以上就是Grid布局的基本知识，个人感觉难度不是很大，就是属性有点多，需要花时间去牢记，多写一些布局，模仿一些网站这样对于掌握这些知识会有很大的帮助，这两天准备学习完Flex和Grid布局之后仿一个京东手机端的页面练练手。

如果有跟我一样才学习这些基础知识的朋友大家可以相互交流一下。

标签：css边框样式有哪些 

作者:whsf66 , 分类:前端教程 , 浏览:7 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言