如何用 CSS 网格快速做出网站原型

thursday 发布于2019-08-29 14:05 / 1498人阅读

摘要：简评网格模块是创建网站模型的绝佳工具。如果你对网格完全陌生，你可能要浏览一下我的分钟介绍网格的文章。每一行代表一行，每一个字符，，，代表一个网格元素。无论标签在标记中是如何放置的，我们都能随意转换。这被称为源代码的独立性，这是的一大进步。

简评：CSS 网格模块是创建网站模型的绝佳工具。它是我尝试过的任何其他系统中最快让你体验布局的工具。

我们的网格

我们将从模仿一个经典网站的非常基本的网格开始：

首先，我将解释我们需要的 HTML 和 CSS 代码，我将之分为 4 个部分。一旦你弄明白了，我们将继续布局试验。

如果你对 CSS 网格完全陌生，你可能要浏览一下我的 5 分钟介绍 CSS 网格的文章。

1. 标记
首先我们需要一点点 HTML 代码。一个容器（我们把它变成网格的元素）和一些项目（标题，菜单，内容，页脚）。


  HEADER
  MENU
  CONTENT
  FOOTER

2. CSS 中的基础设置
然后我们需要设置我们的网格，并声明我们需要多少行和列。这是我们最初的 CSS：

.container {
    display: grid;    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
}

稍后我们会添加更多代码，但首先我想解释一下。

上面的代码意思是：创建一个有 12 列的网格，每列宽度为总宽度的十二分之一。创建三行，第一行高 50px，第二行高 350px，第三行高 50px，最后，网格中每个元素添加一个间隙。

3. 添加 grid-template-areas

让我们能轻松体验布局的功能叫模版区域。

把它添加到网格中，我们只需要简单地给 container 添加一个 grid-template-area 属性即可。语法可能有点怪，因为它不像任何其他的 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 属性背后的逻辑是你在代码中创建一个可视化的网格。你可以看到，它有 3 行、12 列。就像我们在定义 grid-template-columns 和 grid-template-rows 一样。

每一行代表一行，每一个字符（h，m，c，f）代表一个网格元素。

四个字符中的每一个都形成一个矩形：grid-area。

可能你已经猜到了，我选择的四个字符 h，m，c，f 分别代表了 header，menu，content，footer。我当然可以把它们换成我想要的任何字符，但使用它们描述的项目的第一个字符显然比较合理。

4. 把网格区域赋给项目

现在我们需要连接字符和网格中的项目。我们将使用 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 .”;

看起来是这样的：

现在我推荐你看一下我的 CSS 网格课程，你可以自己实验代码。

添加响应能力

把这个和响应能力相结合简直就是一大杀器，以前这是不可能只用 HTML 和 CSS 就能达到这种效果的。假设当你用手机浏览时想让菜单放在标题旁边，你可以这样做：

@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";
    }
}

结果看起来像这样：

GIF 链接（总是上传失败，也是醉了）

记住这些是用纯 CSS 代码完成的，不需要改动 HTML。无论 div 标签在标记中是如何放置的，我们都能随意转换。

这被称为源代码的独立性，这是 CSS 的一大进步。

它让 HTML 回归本职工作：标记内容。至于样式，那是 CSS 的工作。

原文链接：How to prototype websites quickly with CSS Grid

云服务器 GPU云服务器如何用css 如何用php做网站如何用vps搭建网站如何用虚拟主机搭建网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112909.html

【译】编写更好的CSS必备的40个工具

摘要：一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的，并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站，并想要网站正常运行在低版本的上，可以考虑。众所周知，CSS是非常棒的，它使网站看起来很漂亮，可以为网站添加动画，并让呈现和内容分离。去了解CSS的一切是非常难做到的，它只会变得更加困难,因为我...

moven_j 2019-08-28 18:09 评论0 收藏0
前端每日实战：150# 视频演示如何用 CSS 和 D3 创作一个集体舞动画

摘要：接下来用批量增加的元素。引入库声明一个常量，表示网格的边长删除掉文件中的子元素，改为用动态创建继续用连缀语法增加子元素删除掉文件中的变量声明，改为用动态声明略最后，把边长改为，即让个一起动画大功告成 showImg(https://segmentfault.com/img/bVbhJZg?w=400&h=301); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预...

AlphaWatch 2019-08-29 16:53 评论0 收藏0
前端每日实战：150# 视频演示如何用 CSS 和 D3 创作一个集体舞动画

摘要：接下来用批量增加的元素。引入库声明一个常量，表示网格的边长删除掉文件中的子元素，改为用动态创建继续用连缀语法增加子元素删除掉文件中的变量声明，改为用动态声明略最后，把边长改为，即让个一起动画大功告成 showImg(https://segmentfault.com/img/bVbhJZg?w=400&h=301); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预...

tabalt 2019-08-23 12:13 评论0 收藏0