CSSGridLayout基础

时间：2023-03-30 16:53:35 CSS

浏览器兼容性可以看出，从Safari10.1、Firefox52、Chrome60、Edge15开始就支持CSSGridLayout。网格布局页面的基本元素：一个

两个

三个

四个

五个Style:.wrapper{border:2pxsolid#f76707;边界半径：5px；背景色：#fff4e6；}.box{border:2pxsolid#FDC180;通过在元素上声明display:grid或display:inline-grid来创建网格容器：.wrapper{display:grid;效果如下：定义网格中的行和列通过grid-template-columns和grid-template-rows属性定义网格中的行和列。这些属性定义了网格的轨迹。网格轨道是网格中任意两条线之间的空间。以下网格包含三个200px宽的列轨道：.wrapper{display:grid;网格模板列：200px200px200px；}frunits新的fr单位表示网格容器中可用空间的一小部分。下一个网格定义将创建三个等宽的轨道，它们随着可用空间的增长和收缩。.wrapper{显示：网格；网格模板列：1fr1fr1fr；}也可以与像素单元混合使用：.wrapper{display:grid;网格模板列：500px1fr2fr；}使用repeat()repeat有如下语法：repeat(列数/行数，我们想要的列宽);具有多个轨道的大网格可以使用repeat()标志来重复部分或整个轨道列表。以下网格定义：.wrapper{display:grid;网格模板列：1fr1fr1fr；}可以写成：.wrapper{display:grid;网格模板列：重复（3、1fr）；}Repeat语句可用于重复曲目列表的一部分。在下面的示例中，我创建了一个网格：它以20像素的轨道开始，然后重复6个1fr轨道，最后添加另一个20像素的轨道。.wrapper{显示：网格；网格模板列：20px重复（6、1fr）20px；Repeat语句可以传递一个曲目列表，因此您可以使用它在多轨模式下创建一个重复曲目列表。在下一个示例中，网格将总共有10个轨道，一个1fr轨道后面是一个2fr轨道，该模式重复5次。.wrapper{显示：网格；网格模板列：重复（5、1fr2fr）；}grid-auto-rows和grid-auto-columns在创建上面的网格示例时，我们使用grid-template-columns属性定义自己的列轨道，但是让网格根据需要创建行，这些行将在隐式网格。显式网格由您在grid-template-columns和grid-template-rows属性中定义的行和列组成。如果你把一些东西放在网格定义之外，或者因为内容量需要更多的网格轨道，网格将在隐式网格中创建行和列。默认情况下，这些曲目将自动调整大小，因此会根据其内容更改大小。您可以使用隐式网格中的grid-auto-rows和grid-auto-columns属性来定义设置大小的轨道。在下面的示例中，我们使用grid-auto-rows属性来确保在隐式网格中创建的轨迹为200像素高。.wrapper{显示：网格；网格模板列：重复（3、1fr）；网格自动行：200px；}minmax()在设置显式网格或定义自动创建的行和列的大小之前，我们可能希望给网格一个最小大小，但要确保它们扩展以容纳添加到其中的内容。例如，我希望我的行高永远不会缩小到100像素以下，但是如果我的内容延伸到300像素高，我希望我的行高也延伸到那个高度。网格使用minmax()函数来解决这个问题。在下一个示例中，我使用minmax()作为grid-auto-rows值。自动创建的行高最小为100px，最大为auto。使用auto意味着行的大小会根据内容的大小自动变换：根据行中最高的单元格，扩展足够的空间以容纳该单元格。.wrapper{显示：网格；网格模板列：重复（3、1fr）；grid-auto-rows:minmax(100px,auto);}一个两个

我还有一些内容。

这使得我身高超过100像素。

三四五使用grid-column-start、grid-column-end、grid-row-start和grid-row-end属性，使用grid-column-start、grid-column-end、grid-row-start和grid-row-end属性，如下所示跨轨道放置网格项目,将前两个元素放入我们的三列网格中。从左到右，第一个元素从第1列行开始，延伸到第4列行，这是我们示例中最右边的列行。并从第1行线延伸到第3行线，占用两条行轨道。第二个元素从列行1开始并延伸一个轨道。因为这是默认行为，所以我没有指定结束行。并且它跨越从第3行到第5行的两条行轨道。其余元素将自己放置在网格的空闲空间中。.wrapper{显示：网格；网格模板列：重复（3、1fr）；网格自动行：100px；}.box1{网格列开始：1;网格列端：4；网格行开始：1；网格行尾：3；}.box2{网格列开始：1;网格行开始：3；网格行尾：5；可以使用grid-column-gap和grid-row-gap属性创建单元格之间的水平网格间距或垂直网格间距，或者直接使用两者的缩写形式grid-gap。在下面的示例中，我将创建一个水平间距为10px、垂直间距为1em的网格元素。嵌套网格网格项也可以成为网格容器。在下面的示例中，我有一个包含3列的网格元素和两个跨越轨道的网格。在此示例中，第一个网格项包含多个子项。当这些项目不是网格容器的直接子项时，它们不参与网格布局并显示为正常文档流。html：abc两个三个四个五css：.wrapper{display:grid;网格模板列：重复（3、1fr）；}.wrapper{border:2pxsolid#f76707;边界半径：5px；背景色：#fff4e6；}.box1{网格列开始：1;网格列端：4；网格行开始：1；网格行尾：3；}.box2{网格列开始：1;网格行开始：3；网格行尾：5；}.box{border:2pxsolid#FDC180;背景：＃FFD7A4；填充：10px；颜色：#FB2E10；}.nested{border:2pxsolid#FFF1A2;背景：#FFFAD9；}如果我设置box1为display:grid我可以为它定义一个track，它就会成为一个grid元素，它的子元素也会排列在这个新的grid元素中。box1{grid-column-start:1;网格列端：4；网格行开始：1；网格行尾：3；显示：网格；网格模板列：重复（3、1fr）；}参考文章：https://www.w3cplus.com/css3/...https://developer.mozilla.org。..http://caibaojian.com/fr.html

上一篇：ios上webkit-overflow-scrolling和position的bug

下一篇：简单点说！！[]==true和[]==true导致思考

CSSGridLayout基础相关文章