如何用CSSGrid快速制作网站原型

时间：2023-03-30 17:25:03 CSS

简评：CSSGrid模块是制作网站模型的好工具。它是让您开始使用我尝试过的任何其他系统布局的最快工具。我们的网格我们将从模仿经典网站的非常基本的网格开始：首先，我将解释我们需要的HTML和CSS代码，我将其分为4个部分。弄清楚后，我们将继续进行布局实验。如果您是CSSGrid的新手，您可能想查看我的5分钟CSSGrid介绍。1.标记首先我们需要一些HTML代码。一个容器（我们变成网格的元素）和一些项目（页眉、菜单、内容、页脚）。HEADER

CONTENT

FOOTER

2.CSS中的基本设置然后我们需要设置我们的网格并声明我们需要多少行和多少列。这是我们最初的CSS：.container{display:grid;网格模板列：重复（12、1fr）；网格模板行：50px350px50px；grid-gap:5px;}我们稍后会添加更多代码，但首先我想解释一下。上面代码的意思是：创建一个有12列的网格，每列的宽度是总宽度的十二分之一。创建三行，第一行50px高，第二行350px高，第三行50px高，最后，为网格中的每个元素添加一个间隙。3.加入grid-template-areas让我们可以轻松体验称为模板区域的布局功能。要将其添加到网格，我们只需向容器添加一个grid-template-area属性。语法可能有点奇怪，因为它不像任何其他CSS语法。像这样：.container{display:grid;网格间隙：5px；网格模板列：重复（12、1fr）；网格模板行：50px350px50px；grid-template-areas:"hhhhhhhhhhhh""mmcccccccccc""fffffffffffff";}grid-template-areas属性背后的逻辑是你在代码中创建一个视觉网格。如您所见，它有3行和12列。就像我们定义grid-template-columns和grid-template-rows一样。每行代表一行，每个字符（h、m、c、f）代表一个网格元素。四个字符中的每一个组成一个矩形：grid-area。您可能已经猜到了，我选择的h、m、c和f四个字符分别代表页眉、菜单、内容和页脚。我当然可以用我想要的任何字符替换它们，但使用它们描述的项目的第一个字符显然更有意义。4.为项目分配网格区域现在我们需要将角色连接到网格中的项目。我们将使用网格区域属性：.header{grid-area:h;}.menu{grid-area:m;}.content{grid-area:c;}.footer{grid-area:f;}layout结果如下：尝试布局现在终于可以让我们体验一下这个功能的强大了，我们可以轻松地尝试布局。只需修改grid-template-areas中的字符即可。例如，如果我们将上面的菜单向右移动：grid-template-areas:"hhhhhhhhhhhhh""ccccccccccmm""fffffffffffff";结果将变成：我们可以使用.创建一个空白网格：grid-template-areas:".hhhhhhhhhhh。"“cccccccccmm”“。添加响应性将此与响应性结合起来是一个杀手级的东西，这在以前仅使用HTML和CSS是不可能的。假设您希望在手机上浏览时将菜单放在标题旁边，您可以这样做this:@mediascreenand(max-width:640px){.container{grid-template-areas:"mmmmmmhhhhhh""cccccccccccc""fffffffffff";}}结果是这样的：GIF链接（总是上传失败，也醉了）记住这些都是用纯CSS代码完成的，不需要改HTML。不管div标签在标记中怎么放，我们都可以随意改造。这就是所谓的源独立性，向前迈进了一大步对于CSS。它让HTML回到它应该做的事情：标记内容。至于样式，那是CSS的工作。

上一篇：我做了一个重大决定

下一篇：[前端技巧]使用border绘制三角形和梯形

如何用CSSGrid快速制作网站原型相关文章