小白都觉得好用的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>

效果图：

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

使用display: grid;声明一个网格布局，其中.container称为网格容器，其子元素span称为网格项目。
设置轨道的列宽：grid-template-columns：10em 10em auto，意思是声明了一个三列的网格布局，auto表示剩下的布局自适应。
设置轨道的行高：grid-template-rows：5em 5em，意思是声明了一个两行的网格布局，高度都是5em
设置轨道的间距：gap: 0.5em 0.5em，声明了轨道之间的间距，可以简写成gap:0.5em。
网格项目：网格容器中的“子元素”，与flex是一样的，默认生成一列N行的容器（N就是项目的数量）。

总结：

网格容器：由若干个矩形网格单元构成；
网络项目：网格容器的子元素，必须放在网格单元中；
网格单元：有“单元格”和“网格区域”两种表现形式；
网格轨道：由多个网格单元组成，根据排列方向有“行轨”和“列轨”之分；
轨道间距：容器中轨道之间的间距,有"行轨间距","列轨间距"。

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;

效果图：

总结：

% 与 fr可以共存，计算方式：总宽度减去百分比宽度，剩下的宽度都分给fr；
px是固定的，em也是固定的，计算时要减去这些固定值，将剩下的空间都分给fr；
auto，fr，% 都是相对单位，都可以触发自动计算机制，尽可能不要同时出现；
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 Grid 可以将元素放入有行和列的网格中，从而让创建二维布局成为可能。有了它，你可以自定义网格的任何形态，例如网格宽高、网格范围、或者网格之间的间隙。但是，CSS Grid 可能会有访问性不佳的问题，尤其是对于那些使用屏幕阅读器和仅使用键盘的用户。本篇教程将会帮助你避免此类问题。

源顺序独立性

“源顺序独立性”是 CSS Grid 强大优势之一。这意味着你不需要像使用 float 或者表格布局那样，在 HTML 中定义布局结构。你可以使用 CSS Grid 的排序和网格位置属性改变 HTML 呈现的视觉效果。

W3C 的 CSS Grid 文档中的重排序和可访问性章节，将源顺序独立性定义为：

“通过将网格布局与媒体查询相结合，开发者可以使用相同的语义标记，但是元素布局的重新排列是脱离源代码顺序而独立存在的，这样就可以同时在源代码顺序和渲染出的视觉效果两个方面实现需要的布局。”

使用 CSS Grid，你可以将逻辑顺序和视觉顺序解耦。源顺序独立性在很多时候都非常有用，但是它也有可能会破坏代码的可访问性。使用屏幕阅读器和键盘的用户都只能看到你 HTML 文件的代码逻辑顺序，但是无法看到通过 CSS Grid 创建出来的视觉顺序。

如果你的文档很简单，这通常不是什么大问题，因为这时候源代码逻辑顺序和视觉顺序基本是一致的。但是，比较复杂、不对称、零散，或者使用了其他创意布局的文件通常就会对使用屏幕阅读器或者键盘的用户造成困惑。

能改变视觉顺序的属性

CSS Grid 有很多可以改变文档视觉顺序的属性：

order —— 在 flexbox 和 CSS Grid 规则中都有 order 属性。它可以改变 flex 或者 grid 容器中项目的默认排序。

网格位置属性 —— grid-row-start，grid-row-end，grid-column-start，grid-column-end。

上述网格位置属性的简写 —— grid-row，grid-column，和 grid-area（它是 grid-row 和 grid-column 的简写）。

grid-template-areas —— 指定已命名的网格区的位置。

如果你想知道更多关于网格位置属性的使用方法，可以看看我们之前关于网格区域的文章。现在，让我们看看视觉重排序是如何造成代码可访问性的问题的。

视觉效果与逻辑的重排序

这是一个简单的网格布局，只有几个简单的链接，所以你可以使用键盘测试代码：

<div class="container">
 <div class="item-1"><a href="#">Link 1</a></div>
 <div class="item-2"><a href="#">Link 2</a></div>
 <div class="item-3"><a href="#">Link 3</a></div>
 <div class="item-4"><a href="#">Link 4</a></div>
 <div class="item-5"><a href="#">Link 5</a></div>
 <div class="item-6"><a href="#">Link 6</a></div>
</div>

现在我们再加入一些样式。下面的 CSS 代码将网格元素放入了三个宽度相同的列中。使用 grid-row 属性，第一个元素被移动到了第二行的开始。

.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.625rem;
}
 
.item-1 {
 grid-row: 2;
}

在下面这个图中，你可以看到最终的视觉效果，其中 Link 1 被加上了一些特殊样式以便突出说明。普通的用户将会首先看到 Link 2，但是使用屏幕阅读器的用户将会从 Link 1 开始，因为他们遵从的是 HTML 代码中定义的逻辑顺序。

对于纯键盘使用者，使用 tab 键浏览页面也同样困难，因为这样依旧会从 Link 1 开始，也就是页面的左下角（你可以自己尝试一下）。

解决方案

解决方案非常简单优雅。不要改变视觉顺序，你只需要将 Link 1 移动到 HTML 文件的下面。这样，源代码顺序和视觉顺序就一致了。

<div class="container">
 <div class="item-2"><a href="#">Link 2</a></div>
 <div class="item-3"><a href="#">Link 3</a></div>
 <div class="item-4"><a href="#">Link 4</a></div>
 <div class="item-1"><a href="#">Link 1</a></div>
 <div class="item-5"><a href="#">Link 5</a></div>
 <div class="item-6"><a href="#">Link 6</a></div>
</div>

你不需要在 CSS 中为 .item-1 添加任何关于 Grid 的属性。因为你也不用改变默认的源代码顺序了，那么你只需要为网格容器定义属性即可。

.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.625rem;
}

看，尽管这个例子最终结果和以前一样，现在它的可访问性更高了。使用 tab 或者屏幕阅读器都会从 Link 2 开始，逻辑上也遵循源代码顺序。

如何让布局的可访问性更好

这里有几个通用的布局模版，你可以让使用 CSS Grid 重排序属性的代码可访问性更高。例如，“圣杯布局”就是这样一种模式。它包括一个头部，一个主要内容区域，一个页脚，还有两个固定宽度的侧边栏，它们俩一个在左一个在右。

左边栏布局可能会为使用屏幕阅读器的用户造成困惑。因为左边栏在源代码顺序要要比主要内容区域靠前，而它则是使用屏幕阅读器的用户最先看到的内容。但是，通常情况下，使用屏幕阅读器的用户开始阅读的位置最好是主要内容。特别是当左边栏主要包括的其实是广告，博客目录，标签云，或者其他一些不相关的内容。

CSS Grid 允许你改变 HTML 文件的源代码顺序，并将主要内容放在两个侧边栏前面：

<div class="container">
 <header>Header</header>
 <main>Main content</main>
 <aside class="left-sidebar">Left sidebar</aside>
 <aside class="right-sidebar">Right sidebar</aside>
 <footer>Footer</footer>
</div>

还有一些其他可用的解决方案，来使用 CSS Grid 定义视觉顺序的改变。大部分教程都会使用命名的网格区域，并使用 grid-template-areas 属性对它们进行重排列。

下面的代码是最简单的解决方案，因为它只是为视觉顺序和源代码顺序不同的元素添加了几个额外的规则。CSS Grid 有优秀的自动排列功能，能够把余下的网格元素搞定。

.container {
 display: grid;
 grid-template-columns: 9.375rem 1fr 9.375rem;
 grid-gap: 0.625rem;
}
header, 
footer {
 grid-column: 1 / span 3;
}
.left-sidebar {
 grid-area: 2 / 1;
}

这样，grid-column 让 <header> 和 <footer> 区域横跨整个屏幕（三列），然后 grid-area（grid-row 和 grid-column 的简写）固定了左边栏的位置。如下就是使用这些样式后的样子：

尽管圣杯布局是一个相对简单的布局，你还可以使用相同的逻辑来完成一些更复杂的布局。要始终牢记页面的哪个部分是最重要的，哪部分是使用屏幕阅读器的用户在看到其他内容之前可能最想看的。

语义丢失怎么办

某些情况下，CSS Grid 也会对语义造成破坏；这也是影响可访问性的一个方面。由于 display: grid; 布局仅被元素的直接子元素继承，网格元素的子元素其实就不是网格布局的一部分了。为了节省工作量，开发者也许认为将布局扁平化是一个不错的解决方案，所以他们就将所有希望包括在网格布局内的元素都作为网格容器的直接子元素。但是，如果一个布局被认为的扁平化了，文件的语义通常也就丢失了。

加入你想要创建一个元素展览墙（比如图片墙），在这里，元素按照网格排列并被一个头部和一个页脚包围。如下是带语义的标签写法：

<section class="container">
 <header>Header</header>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
 </ul>
 <footer>Footer</footer>
</section>

但是如果你想要使用 CSS Grid，<section> 应该作为网格容器，<h1>、<h2> 和 <ul> 是网格元素。但是，列表内的元素不被包括在网格内，因为他们是网格容器子元素的子元素。

所以，如果你想要快速的完成工作，将布局结构扁平化也许是一个不错的主意，也就是让所有的元素都作为网格容器的子元素：

<section class="container">
 <header>Header</header>
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
 <div class="item">Item 4</div>
 <div class="item">Item 5</div>
 <div class="item">Item 6</div>
 <footer>Footer</footer>
</section>

现在，你就可以很轻松地使用 CSS Grid 创建出想要的布局：

.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.625rem;
}
header,
footer {
 grid-column: 1 / span 3;
}

一切看上去都非常好，但是文档已经丢失了它最初的语义，所以：

使用屏幕阅读器的用户无法知道元素之间的关系，也无法知道它们其实是列表的一部分（大部分的屏幕阅读器都会通知用户列表元素的数量）；

被破坏的语义也会让搜索引擎很难明白你的内容；

如果用户在禁用 CSS 的时候访问你的内容（例如，网速不佳的时候），在浏览页面时可能会很困惑，因为他们只看到一系列不相关的 div。

最重要的规则是，你绝对不能为了看上去好看而放弃语义。

解决方案

目前的解决方案通过为未排序的列表添加了 CSS 规则，创建出了嵌套的网格。

.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.625rem;
}
.container > * {
 grid-column: 1 / span 3;
}
ul {
 display: inherit;
 grid-template-columns: inherit;
 grid-gap: inherit;
}

在如下例子中，你可以看到嵌套的网格和父级网格是如何关联的。元素按照期望的样子排列出来了，但是此时，文档始终保留着它的语义。

总结

简单的 CSS Grid 布局可能不会导致可访问性的问题。但是当你想要改变视觉顺序或者创建多层网格的时候，问题就可能暴露出来。解决这些问题通常不会很麻烦，所以这样做来修复那些可访问性问题是很值得的，因为这样你能够让那些使用辅助工具的用户更易读懂你的内容。

稿件来源：阿里云开发者社区（点击下面“了解更多”查看原文）

何把网页上的内容用javascript来实现截图？今天分享的html2canvas就可以。

介绍

在微信项目中经常会遇到动态生成海报的需求，Web前端合成图片往往会使用canvas。canvas虽然强大，但用来合成海报非常繁琐，一不小心就几百行代码了。而html2canvas.js是一款轻松地将HTML+CSS写成的布局直接转换成canvas，生成可保存分享的图片。

html2canvas.js官网截图

特点

兼容现代浏览器，手机项目可放心大胆使用；
官网文档清晰简单，用法简单支持npm/yarn和cdn引入，有充足的代码例子；
支持部分常用的CSS属性，配合图片使用几乎能满足所有动态生成海报的需求。

使用体验

这是一个把HTML的DOM结构根据所支持的CSS样式生成canvas的js开源库，CSS的写法千变万化，不同的布局有很多不同的写法，因此html2canvas是不能100%还原网页的样式，因此不用用于像电脑屏幕截图这样的需求中。

官网关于支持css的说明

使用的时候要注意查看所支持的CSS属性，尽量使用这些属性来写布局，不支持的效果可以尝试用图片来实现。只要产品经理脑子在线，目测几乎没有什么海报需求是实现不了的。

官网是英文的，写得很专业，谷歌翻译阅读无压力。

免费使用说明

html2canvas 由开发者 Niklas von Hertzen 创建，基于MIT许可开源，可以免费使用在任何项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的相关网址。

在线咨询

上一篇：教你5分钟写一个属于自己的网页
下一篇：前端加薪从熟悉SEO排名开始，来先吃透这10个HTM

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

一、认识Grid属性

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

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

1. 值中只有span

2. 值中有span和编号

3.minmax()函数

源顺序独立性

视觉效果与逻辑的重排序

如何让布局的可访问性更好

语义丢失怎么办

总结

介绍

特点

使用体验

免费使用说明

您的项目需求