自适应CSS网格布局
CSS网格布局(Grid )是一种在Web上创建二维布局的新方法。 只需几行CSS，就可以创建以前在JavaScript中无法实现的网格布局。 无需受限于插件、复杂的安装过程、繁琐的附件或12列网格布局。
可以用什么样的网格吗？ 简而言之，我们可以使用实际上能想到的大多数网格布局，但不限于此。 我们可以自由选择不同网格的大小、大小和位置。 有关最常见的标记网格的概述，请参阅网格示例。
让我们从构建示例的HTML标记开始。 类名为container的div元素包含五个子div元素，或者称为项目。 当然，多于或少于5个都可以。 如果可以的话，直接从CodePen的HTML和CSS标签代码开始吧。
divclass=' container ' divclass=' item color-1 ' item-1/divdivclass=' item color-2 ' item-2/divdivdivclass=' item clas
基本：在CSS中设置网格和矩阵在CSS中，可以使用display: grid定义将. container类的元素更改为网格布局。 使用grid-template-columns分割了所需的列。 在本例中，分割为5列，每列设定为250px。 使用网格模板行，可以根据需要设置行高。 在本例中为150px。 以上步骤完成后，实现了第一个网格布局。
. container { display: grid； 网格模板列3360250 px 250 px 250 px 250 px 250 px 250 px 250 px 250 px 250 px 250 px 250 px 250 px； 网格模板行： 150 px； (/*缩写： grid-template-columns : repeat (5250 px )； */
设置间隔使用grip-gap设置每个项目之间的间隔。 或者，使用“column-gap”和“row-gap”分别设置水平和垂直间隔。 顺便说一下，可以使用所有常用单位，例如使用px设置固定间隔，或使用%设置自适应间隔。
. container { display: grid； 网格模板列3360报告(5，250 px )； 网格模板行： 150 px； grid-gap: 30px； }
使用fr自动填充剩下的空间是所有设计师的梦想！ 我们可以使用“分数单位”(Fractional Units )或缩写fr根据我们的想法分配可用空间！ 例如，这里将屏幕空间分为六个部分。 第一列占用空间的1/6=1fr，第二列的3/6=3fr，第三列的2/6=2fr。 当然，您也可以根据需要添加栅格-间隙。
. container { display: grid； grid-template-columns 33601 fr3fr 2fr； }
现在每一行都在适应！
同时使用px和fr构建自适应、固定的列px和fr，可以使网格适应可用空间，这非常方便。
. container { display: grid； grid-template-columns 3360300 px3fr 2fr； }
排序上的绝对自由我见，在网格中，我们可以自由设定各自占有的尺寸！ 网格列开始、网格列结束或网格列3360开始点/结束；
. container { display: grid； grid-template-columns 33601 fr3fr 2fr； }.item-1 { grid-column: 1/4； }.item-5 { grid-column: 3/4； }
请不要被网格线所迷惑。 它们总是在第一项的开始！
也适用于垂直或全部区域的分布！ 在这方面，CSS Grid闪闪发光，通过显示出比较Bootstrap和Co的优越性的3354grid-row，可以分别定义任意的位置和宽度。 如下例所示，这对于适应各种屏幕大小和设备具有绝对的优势。
. container { display: grid； grid-template-columns 33601 fr3fr 2fr； }.item-2 { grid-row: 1/3； }.item-1 { grid-column: 1/4； 网格行：3/4； }
您想支持不同的屏幕大小和设备吗？ 当然没问题！ CSS网格与普通网格相比也有明显的优势，不仅可以根据屏幕大小通过媒体查询从适应值切换到固定值，还可以调整整个项目的位置！
. container { display: grid； grid-template-columns 3360250 px3fr 2fr； }.item-1 { grid-column: 1/4； }.item-2 { grid-row: 2/4； } @ mediaonlyscreenand (max-width 3360720 px (.container ) grid-template-columns 33601 fr1fr； } .item-1 { grid-column: 1/3； 网格行：2/3； } .item-2 { grid-row: 1/1； }