Logo

菜单

发布于 2026-01-06 0 阅读
0

如何使用 CSS Grid 和 CSS Variables 快速构建应用程序原型 DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

如何使用 CSS Grid 和 CSS 变量快速构建应用程序原型

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！


CSS Grid 和 CSS Variables 对前端开发者来说都是巨大的福音。前者让创建网站布局变得无比简单，而后者则为样式表带来了变量的强大功能。

在本教程中，我将向您展示如何将它们结合起来使用，以便快速创建应用程序设计原型。

我们将使用的示例直接取自我的免费课程，该课程讲解如何使用 React.js 和Chatkit API构建聊天应用程序：

点击图片即可进入课程点击图片即可进入课程。

如果您更喜欢观看互动式屏幕录像而不是阅读，请点击此处查看我的课程的第 15 和 16 讲。在这些视频中，您还可以访问代码，以便自行进行实验。在学习本教程的同时，也欢迎您这样做。

设置网格容器

我们的应用使用了 CSS Grid 进行布局，这个模块可以轻松构建布局并调整布局元素的位置。如果您要利用某个grid-template-areas属性，这将特别有用，稍后我会向您展示我们是如何使用该属性的。

我们先来看看最初的聊天应用长什么样：

如果我们打开 Chrome 的开发者工具，就可以检查底层网格的构建方式。正如你所看到的，它有六行六列：

创建这种网格的代码如下：

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
}
Enter fullscreen mode Exit fullscreen mode

首先，我们将容器设置为网格布局。然后，我们指定要有六列，每列的宽度为一个分数单位（1/1000 1fr）。一个分数单位表示可用空间的1/1000。所以这里我们将宽度分成六个等宽的分数，并给每一列分配一个分数。

至于行，我们并没有将所有行的高度都调整为相同，因为最后一行比其他行矮。我们明确地将其设置为60px高而不是1fr矮：

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;
Enter fullscreen mode Exit fullscreen mode

现在我们已经搭建好了网格的结构，可以继续进行下一部分：定位。

定位网格项

网格容器的每个直接子元素都是一个网格项。我们有四个网格项，每个网格项都被框在一个矩形框内，如下图所示：

为了使这些项目放置在上面所示的位置，我们需要使用该grid-template-areas属性并在样式表中构建网格的可视化表示：

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";
}
Enter fullscreen mode Exit fullscreen mode

每个字符串代表一行，每个字符代表网格中的一个单元格。这些字符与它们所代表的网格项（房间列表、消息列表、新建房间表单和发送消息表单）具有语义关系。

现在，为了根据我们的要求定位项目，grid-template-areas我们需要使用字符作为它们的grid-area值。像这样：

.new-room-form {  
  grid-area: n;  
}

.rooms-list {  
  grid-area: r;  
}

.message-list {  
  grid-area: m;  
}

.send-message-form {  
  grid-area: s;  
}
Enter fullscreen mode Exit fullscreen mode

当然，这些类也应用到了我们 HTML 中的网格项上。不过，我不会详细介绍这部分内容，因为我假设您知道如何向 HTML 标签添加类。

有了这些准备工作，我们就可以开始尝试不同的布局了。只需交换数值中的几个字符grid-template-areas，我们就能完全翻转布局。

在上面的GIF图中，我通过改变房间列表项和新建房间表单项的位置，尝试了四种不同的布局。我唯一改变的是grid-template-areas属性。

以下是四种变体。请尝试将它们分别映射到对应的布局：

grid-template-areas:  
    "n m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r s s s s s";

grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";

grid-template-areas:  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s n";

grid-template-areas:  
    "m m m m m n"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s r";
Enter fullscreen mode Exit fullscreen mode

如果你参加我的 React.js 聊天应用程序课程，你将获得属于你自己的代码副本，这样你就可以按照你喜欢的方式更改布局。

使用CSS变量更改颜色

现在我们将使用 CSS 变量来更改应用程序的颜色。如果您之前没有接触过 CSS 变量，请快速浏览下面的图片，它们概括了 CSS 变量的核心概念：


如上图所示，变量名比十六进制值更具语义，因此代码更易于阅读。其次，如果您想更改颜色，它也提供了更大的灵活性。

让我们来看看我们如何使用 CSS 变量来设置应用程序的样式，首先从变量声明开始：

:root {  
  --main-color:            #5ea3d0;  
  --secondary-color:       white;  
  --main-text-color:       #3e5869;  
  --secondary-text-color:  #b0c7d6;  
  --new-room-form:         #d9e1e8;  
  --send-message-form:     #F5F5F5;  
}
Enter fullscreen mode Exit fullscreen mode

这些变量在整个样式表中被重复使用了 17 次。但我们不必逐一查看所有这些地方，而是来看看它--main-color在消息和左侧边栏中是如何用作背景颜色的。

以下是代码中的实现方式：

.rooms-list {  
  background: var(--main-color);}

.message-text {  
  background: var(--main-color);  
}
Enter fullscreen mode Exit fullscreen mode

变量的妙处在于，我们现在可以更改变量的声明，而这一更改将影响整个应用程序。例如，我们来看一下：

:root {  
  --main-color: red;  
}
Enter fullscreen mode Exit fullscreen mode

……由此得出以下结果：

现在我们可以做的就是简单地更改所有变量声明 :root，从而改变我们应用程序的整体外观和风格。

例如，我们可以在网上找到一个不错的调色板，然后直接在我们的应用程序中使用它：

:root我们将用上面调色板中的颜色替换我们调色板中的一些颜色 ：

:root {  
  --main-color: #5ea3d0;  
  --secondary-color: white;  
  --main-text-color: #3e5869;  
  --secondary-text-color: #b0c7d6;  
  --new-room-form: #d9e1e8;  
  --send-message-form: #F5F5F5;  
}
Enter fullscreen mode Exit fullscreen mode

这就产生了一种完全不同的聊天方式：

网格与变量的结合

如果我们结合使用 CSS Grid 改变布局，就能得到两个截然不同的聊天应用程序。让我们来试试：


以下是我们的起点与最终示例的对比。

:root {  
  --main-color:           #ff66ff;  
  --secondary-color:      #fbd8fb; 
  --main-text-color:      #3e5869;  
  --secondary-text-color: #d8b2ff;  
  --new-room-form:        #ffb2ff;  
  --send-message-form:    #d8b2ff; 
}

.app {  
  display: grid;  
  grid-template-columns: repeat(6, 1fr);  
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m n n"  
    "f f f f f f"; 
}
Enter fullscreen mode Exit fullscreen mode

挺酷的，对吧？

现在我建议你完整地学习我的课程。课程中，我会指导你使用 React.js 和Chatkit API创建这个应用。当然，我也会分享完整的代码，方便你亲自体验这个设计。

感谢阅读！我叫佩尔，是Scrimba的联合创始人，我热爱帮助人们学习新技能。如果您想收到新文章和资源的通知，请在Twitter上关注我。

文章来源：https://dev.to/scrimba/how-to-quickly-prototype-apps-with-css-grid-and-css-variables-3p7e
Retraction of an ...
RAG 中最难的问题……如何处理“...