这次打算进行一些编码练习，这个概念是相当新颖的， CSS 网格布局.
如果你想知道关于这个代码挑战的详细代码内容或者其他更多的学习资料，请查看评论，我会在评论区中发出我前端学习qun，加入即可免费领取代码和学习资料。
在CSS网格之前，我们必须集中精力使用 float S， display: inline-block
以及各种各样的移动元素。多亏了新的属性 grid-template , grid-gap ，和 grid-column / grid-row
我们可以用很少几行代码编写这个计算器。
让我们通过解决方案，看看如何快速方便地构建这个布局。
代码挑战
挑战是使用css网格构建一个计算器！
解决方案
我们将开始这个解决方案通过专注于HTML。我们将一切都封装在一个 calculator 类:
<div
<!-- the input -->
<inputtype="number">
<!-- the buttons -->
<div
<!-- buttons go here -->
</div>
</div>
添加计算器按钮
现在我们有了计算器的基础。让我们开始添加按钮。我们需要：
10位数：0至9
一个清晰的按钮
相等按钮
4操作员：÷，×，-+
我们可以按照他们会出现的顺序来添加它们：
...
<!-- the buttons -->
<div>
<button>
<button >
<button>
<button>
</button>
</div>…
注意，我已经添加了一些线-中断/间隔来澄清。我们已经把线上的故障放在了我们想象的网格行将会发生的地方。
快速计算器造型
我们的计算器在这个时候看上去并不像计算器：
让我们添加一些快速的样式，这样我们就不会使用一些真正没有样式和难看的按钮了。首先，总体计算器样式：
/* quick reset so all our padding is the right size */
* { box-sizing: border -box;
}
/* add some spacing */
body {
background: #F6F6F6;
padding-bottom: 30px;
padding-top: 30px;
}
/* limit the width and center */
.calculator {
max-width: 400px;
margin: 0 auto;
border: 2px solid #111;
border-radius: 5px;
}
按钮样式
在我们进入css网格乐趣之前，我们将快速地调整按钮。我们将为单个按钮添加css，但是我们不会处理 .calculator-buttons 集装箱到了。这就是所有CSS网格魔术将发生的地方。这将只是为了快速造型。
.calc-button {
background: rgba(0, 0, 0, 0.5); /* light background with opacity 50% */
border: 1px solid #111; /* black border */
padding: 20px;
color: #EEE; /* white text */
/* rounded corners */
font-size: 22px; /* larger fonts */
cursor: pointer; /* make it look clickable */}
输入样式
输入将需要几种样式来使它与我们的计算器现在：
.calculator input {
/* reset basic form styles */
background: none;
border: none;
box-shadow: none;
outline: none;
padding: 10px;
width: 100%;
border-bottom: 2px solid #111;
color: #333; text-align: right;
font-size: 40px;
border-radius: 0;
}
现在我们有了我们的输入和按钮看起来不错！
使用css网格定位按钮
我们计算器的最后一部分可能只是最简单的部分。我们将使用css网格来定位我们的按钮。要使用css网格布局，我们只需定义我们希望在父元素上的布局；在本例中， .calculator-buttons 迪夫。
可以自由地玩这些数字，但是我们将从创建我们的四栏.
{
/* small spacing within our container */
/* the grid stuff! */
display: grid;
/* create 4 columns */
grid-template-columns: 1fr 1fr 1fr 1fr;
}
我们已经宣布 display: grid 确保容器是网格。接下来，我们定义四栏我们希望使用 fr (分数单位)
这意味着css将创建具有相同宽度的列。这意味着我们四个列中的每一个都将是25%宽度。
我们甚至不必在这里定义行数。元素将一直移动到新行，直到它们都被放置。
速记
需要注意的一点是，CSS Grid附带了 repeat() 函数，它允许我们不必写出所有列/行。上述情况可重新分解为：
grid-template-columns: repeat(4, 1fr);
当您想创建许多列时，这将非常有用。
网格间隙增加间距
我们的按钮是挨着对方的，但是我们需要增加一些间距来使它看起来像一个实际计算器。
为了添加一个空白，我们可以使用以下内容：
...
/* add the grid gap */
grid-gap: 15px;}
现在我们的计算器按钮有间距！
大宽度按钮
为了我们更大的 C (清楚)按钮，我们可以通过特定的目标来轻松地使它们跨越多个列。让我们单独针对每个人，因为我们也想改变他们的颜色。如果您想使用一个css类，可以调用它，并且可以调用它。 span-3 或者沿着这些线。
在这里，我们将创建一个 is-clear 以及 is-zero
每个按钮的类。继续，然后将它们添加到html中。然后我们可以添加这些css类：
/* span across 3 columns */
.is-zero,.is-clear {
grid-column: span 3;
}
/* go blue */
.is-clear {
background: #3572DB;
}
彩色等于按钮
向您的equals按钮添加类并调用它 is-equals 。下面是CSS：
.is-equals { background: #28D060;}
计算器字体
最后一次撒上造型，我们会添加给计算器，这个计算器额外的一点是字体。头上n.fonts.google.com然后浏览一下你喜欢的好字体。我已经安顿好了空间mono为了我的计算器。
添加 @import 到css的顶部并添加 font-face 到 .calculator input 而 .calc-buttons
@import url('
.calculator input,
.calc-button {
font-family: 'Space Mono';
}
我们的计算器已经完成了！
结论
希望你喜欢关于css网格和代码挑战的内容。如果你想要了解更多关于代码挑战的解决方案，请查看评论，加入我的前端学习qun，我将会发布资料。
