【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

原文：www.freecodecamp.org/news/how-to…
做者：Per Harald Borgen
翻译：前端小白

CSS 网格布局和 CSS 自定义变量为前端开发人员带来了很大的好处。前者使咱们建立网站布局很是简单，然后者则是咱们能够在 CSS 样式表使用变量。

在本教程中，我将向你展现如何将它们结合使用以快速构建应用程序设计原型。

咱们使用的示例直接取自个人免费课程，内容是关于如何使用 React.js 和 Chatkit API 构建聊天应用程序

点击获取教程

若是你不想阅读文章，想看录屏视频，看看我这门课的第15和16节，在里面，你能够获取代码，以便本身进行试验。在学习本教程时，请尽情去本身试验。

设置网格容器

咱们的 app 使用 CSS 网格布局，css gird 是个很强大的模块，，使用它能够很容易构造布局，并随意移动，若是使用 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;  
}
复制代码

首先，咱们将容器设置为网格，而后咱们想要6列，每一列应该都是一个分数（1fr）单位宽，一个分数单位表示可用空间的一部分。这里咱们把宽度等分红六个一样宽的份数，给每一列一份。

至于行，咱们没有将他们等分红和高度相等的份数，，由于最后一行没有其余行那么高。咱们明确地将它设为 60px 高而不是 1fr 高。

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;
复制代码

如今咱们设置了网格的结构，咱们能够进入下一个部分:定位

网格元素定位

网格容器的每一个直接子元素都是一个网格项。咱们有四个网格项，每项都被包裹在下图中的矩形中

为了让每一项都显示在上图中的相应位置，咱们须要使用 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";
}
复制代码

每一个字符串表示一行，每一个字符表示网格中的一个单元格。字符与网格项(房间列表、消息列表、建立新房间和发送消息)具备语义关系。

如今为了根据 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;  
}
复制代码

这些类名固然也应用于HTML中的网格项。可是，我不会详细介绍这一点，由于我假设您知道如何向 HTML 标签中添加类。

有了这些，咱们就能够开始试验布局了。只需在 grid-template-areas 值中交换几个字符，咱们就能够彻底翻转布局。

在上面的动图中，我经过更改 room list item 和 the new room form item 的位置来尝试四种不一样的布局。 我惟一要改变的是 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";
    
复制代码

若是你学习了个人课程，你会有本身的代码，能够尝试更改你喜欢的布局

使用 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;  
}
复制代码

这些变量在整个样式表中重用了17次。可是，咱们不须要遍历全部这些地方，让咱们看看 ——main-color 是如何在消息框和左侧侧边栏中用做背景颜色的。

代码中咱们能够这样使用：

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

.message-text {  
  background: var(--main-color);  
}
复制代码

变量的美妙之处在于咱们更改变量声明。会影响到整个app效果

:root {  
  --main-color: red;  
}
复制代码

如今看起来是这样：

咱们只须要简单地在 :root 更改变量声明的值，就会改变整个 app 的样式

参考以下调色板，选择喜欢的颜色应用到 app

声明变量：

:root {  
  --main-color: #5ea3d0;  
  --secondary-color: white;  
  --main-text-color: #3e5869;  
  --secondary-text-color: #b0c7d6;  
  --new-room-form: #d9e1e8;  
  --send-message-form: #F5F5F5;  
}
复制代码

结果：

网格布局的变量相结合

若是咱们将此与使用 CSS 网格更改布局相结合，就会获得两个互不类似的独特聊天应用程序。咱们来作一下

和最后的示例相比较，这是咱们刚开始布局看起来的样子：

: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"; 
}
复制代码

至关酷。

如今我建议你学习个人完整课程。我将引导你使用 react.js和 Chatkit API 建立这个应用程序。固然，我会共享完整的代码，你能够本身设计。