rows是什么意思,rows的意思翻译、用法、同义词、例句，olumns

大家好，感谢邀请，今天来为大家分享一下rows是什么意思,rows的意思翻译、用法、同义词、例句的问题，以及和olumns的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

为了使其成为二维的网格容器，我们需要定义列和行。让我们创建3列和2行。我们将使用grid-template-row和grid-template-column属性。

.wrapper{\ndisplay:grid;\ngrid-template-columns:100px100px100px;\ngrid-template-rows:50px50px;\n}\n

grid-template-columns的3个值表示三列，相应的数值表示列宽即都为100px。

grid-template-rows的2个值表示两行，相应的数值表示行高即都为50px

可以变化一下行高跟列宽的值看下效果，代码：

.wrapper{\ndisplay:grid;\ngrid-template-columns:200px50px100px;\ngrid-template-rows:100px30px;\n}\n放置items(子元素)

我们使用与之前相同的HTML标记，为了帮助我们更好的理解，我们在每个items(子元素)加上了单独的class：

<divclass="wrapper">\n<divclass="item1">1</div>\n<divclass="item2">2</div>\n<divclass="item3">3</div>\n<divclass="item4">4</div>\n<divclass="item5">5</div>\n<divclass="item6">6</div>\n</div>\n

创建一个3×3的grid(网格)：

.wrapper{\ndisplay:grid;\ngrid-template-columns:100px100px100px;\ngrid-template-rows:100px100px100px;\n}\n

\n在页面上看到3×2的grid(网格)，而我们定义的是3×3的grid(网格)。这是因为我们只有6个items(子元素)来填满这个网格。如果我们再加3个items(子元素)，那么最后一行也会被填满。\n定位和调整（item）子元素大小\n

要定位和调整items(子元素)大小，我们将使用grid-column和grid-row属性来设置：

.item1{\ngrid-column-start:1;\ngrid-column-end:4;\n}\n

当然可以有简写方式：

.item1{\ngrid-column:1/4;\n}\n

上面代码意思就是：item1占据从第一条网格线开始，到第四条网格线结束。显示效果如下：

如果你不明白我们设置的只有3列，为什么有4条网格线呢？看看下面这个图像，黑色的列网格线你就明白了：

如果上面的看懂了，来个复杂点的巩固下。

.item1{\ngrid-column-start:1;\ngrid-column-end:3;\n}\n.item3{\ngrid-row-start:2;\ngrid-row-end:4;\n}\n.item4{\ngrid-column-start:2;\ngrid-column-end:4;\n}\n

效果如图：

响应式布局例子

<style>\n.container{\ndisplay:grid;\ngrid-template-columns:repeat(12,1fr);\ngrid-template-rows:50px350px50px;\ngrid-gap:5px;\n}\n</style>\n<divclass="container">\n<divclass="header">HEADER</div>\n<divclass="menu">MENU</div>\n<divclass="content">CONTENT</div>\n<divclass="footer">FOOTER</div>\n</div>\n

使用grid-template-columns属性创建一个12列的网格，每个列都是一个单位宽度（总宽度的1/12）。（愚人码头注：其中，repeat(12,1fr)意思是12个重复的1fr值。fr是网格容器剩余空间的等分单位。）

使用grid-template-rows属性创建3行，第一行高度是50px，第二行高度是350px和第三行高度是50px。

使用grid-gap属性在网格中的网格项之间添加一个间隙。

添加grid-template-areas

这个属性被称为网格区域，也叫模板区域，能够让我们轻松地进行布局实验。

要将它添加到网格中，我们只需给网格容器加一个grid-template-areas属性即可。语法可能有点奇怪，因为它不像其他的CSS语法。例如：

.container{\ndisplay:grid;\ngrid-gap:5px;\ngrid-template-columns:repeat(12,1fr);\ngrid-template-rows:50px350px50px;\ngrid-template-areas:\n"hhhhhhhhhhhh"\n"mmcccccccccc"\n"ffffffffffff";\n}\n

上面代码创建3行12列，上面grid-template-areas属性中的值，每行代表一行，用网格术语来说是网格轨道(GridTrack)，每个字符（h，m，c，f）代表一个网格单元格。愚人码头注：其实是网格区域(GridArea)名称，你可以使用任意名称。

你可能已经猜到，我选择了字符h，m，c，f，是因为他们是header,menu,content和footer的首字母。当然，我可以把它们叫做任何想要的名称，但是使用他们所描述的东西的第一个字符更加容易让人理解。

给网格项设定网格区域名称

现在我们需要将这些字符与网格中的网格项建立对应的连接。要做到这一点，我们将在网格项使用grid-area属性：

.header{\ngrid-area:h;\n}\n.menu{\ngrid-area:m;\n}\n.content{\ngrid-area:c;\n}\n.footer{\ngrid-area:f;\n}\n

这样就实现了上面的布局效果。

1.把menu移到右边

grid-template-areas:\n“hhhhhhhhhhhh”\n"ccccccccccmm”\n“ffffffffffff”;\n

实现后的效果：

2.使用点.来创建空白的网格单元格

grid-template-areas:\n“.hhhhhhhhhh.”\n"ccccccccccmm”\n“.ffffffffff.”;\n

实现效果：

3.真正的响应式布局

假设你想在移动设备上查看的是：标题旁边是菜单。那么你可以简单地这样做：

@mediascreenand(max-width:640px){\n.container{\ngrid-template-areas:\n"mmmmmmhhhhhh"\n"cccccccccccc"\n"ffffffffffff";\n}\n}\n

可以看到如下效果：

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！