grid 制作一个计算器

好的，我可以为您介绍一下如何使用 grid 布局来制作一个计算器。

首先，我们需要在 HTML 中创建一个包含计算器所有元素的容器。我们可以使用一个 div 元素作为容器，并设置其 class 属性为 "calculator-container"。

接下来，我们可以使用 CSS 中的 grid 布局来设置容器中的元素的位置和大小。我们可以使用 grid-template-areas 属性来创建一个包含所有元素的网格，并使用 grid-template-columns 和 grid-template-rows 属性来设置网格的列和行的大小。

例如，以下是一个简单的计算器的 HTML 和 CSS 代码：

HTML 代码：

<div class="calculator-container">
  <div class="display">0</div>
  <button class="number">1</button>
  <button class="number">2</button>
  <button class="number">3</button>
  <button class="operator">+</button>
  <button class="number">4</button>
  <button class="number">5</button>
  <button class="number">6</button>
  <button class="operator">-</button>
  <button class="number">7</button>
  <button class="number">8</button>
  <button class="number">9</button>
  <button class="operator">*</button>
  <button class="clear">C</button>
  <button class="number">0</button>
  <button class="equals">=</button>
  <button class="operator">/</button>
</div>

CSS 代码：

.calculator-container {
  display: grid;
  grid-template-areas:
    "display display display display"
    "number number number operator"
    "number number number operator"
    "number number number operator"
    "clear 0 equals operator";
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 10px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.display {
  grid-area: display;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
  text-align: right;
}

.number {
  grid-area: number;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
  text-align: center;
}

.operator {
  grid-area: operator;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
  text-align: center;
}

.clear {
  grid-area: clear;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
  text-align: center;
}

.equals {
  grid-area: equals;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
  text-align: center;
}

运行以上代码，就可以得到一个简单的计算器，用户可以进行加减乘除的运算。当然，这只是一个简单的例子，您可以根据自己的需求来自定义计算器的样式和功能。