时间：2023-07-29 22:09:01 | 来源：网站运营
时间：2023-07-29 22:09:01 来源：网站运营
使用CSS Grid快速建立网站原型：
在线咨询
<div class="container"> <div class="header">HEADER</div> <div class="menu">MENU</div> <div class="content">CONTENT</div> <div class="footer">FOOTER</div> </div>.container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; }我稍后会添加更多，但我首先要你理解这一点。grid-template-areas属性。语法可能有点奇怪，因为它与其他任何CSS语法不同。这里是：.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f";}该grid-template-areas属性背后的逻辑是您在代码中创建网格的可视化表示。如您所见，它有三行十二列，就像我们在grid-template-columns和中定义的一样grid-template-rows。每行代表一行，每个字符（h，m，c，f）代表一个网格单元。四个字母中的每一个现在形成矩形
grid-area。h，m，c，f因为我们的电网包括header，menu，content和footer。当然，我可以把它们称为任何我想要的东西，但是使用他们描述的项目的第一个字符是有意义的。grid-area属性：.header { grid-area: h; }.menu { grid-area: m; }.content { grid-area: c; }.footer { grid-area: f; }这导致以下布局：grid-template-areas房产特征的问题。例如，让我们将菜单移到右侧：grid-template-areas: “h h h h h h h h h h h h” "c c c c c c c c c c m m” “f f f f f f f f f f f f”;这导致了这种布局：grid-template-areas: “. h h h h h h h h h h .” "c c c c c c c c c c m m” “. f f f f f f f f f f .”;这是看起来如何：@media screen and (max-width: 640px) { .container { grid-template-areas: "m m m m m m h h h h h h" "c c c c c c c c c c c c" "f f f f f f f f f f f f";} }这将产生以下结果：关键词：原型,建立,使用
