`
body {
margin:0;
}
.main-container {
display:flex;
flex-direction:column;
justify-content:space-between;
height:100vh;
width:100vw;
background-color:#7D7D7D;
}
.header-container {
display:flex;
justify-content:center;
align-items:center;
height:15vh;
background-color: #9BBB88;
}
.middle-container {
display:flex;
justify-content:center;
align-items:center;
height:75vh;
}
.calculator {
display:grid;
grid-template:
"a a"
"b c";
grid-gap: 5px;
}
.display-container {
grid-area: a;
background-color: aqua;
}
.numbers-container {
grid-template:
"seven eight nine"
"four five six"
"one two three"
" zer ";
grid-area: b;
background-color: blue;
}
#seven-btn {
grid-area: seven;
}
#eight-btn {
grid-area: eight;
}
#nine-btn {
grid-area: nine;
}
#four-btn {
grid-area: four;
}
#five-btn {
grid-area: five;
}
#six-btn {
grid-area: six;
}
#one-btn {
grid-area: one;
}
#two-btn {
grid-area: two;
}
#three-btn {
grid-area: three;
}
#zero-btn {
grid-area: zer;
}
.functions-container {
grid-area: c;
background-color: blueviolet;
}
.footer-container {
display:flex;
justify-content:center;
align-items:center;
height:10vh;
background-color:#3B6225;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="main-container">
<header class="header-container">
<h1 id="header-text">Have fun playing with this, a simple calculator.</h1>
</header>
<div class="middle-container">
<div class="calculator">
<div class="display-container">
<p id="display"></p>
</div>
<div class="numbers-container">
<button id="seven-btn">7</button>
<button id="eight-btn">8</button>
<button id="nine-btn">9</button>
<button id="four-btn">4</button>
<button id="five-btn">5</button>
<button id="six-btn">6</button>
<button id="one-btn">1</button>
<button id="two-btn">2</button>
<button id="three-btn">3</button>
<button id="zero-btn">0</button>
</div>
<div class="functions-container">
<button id="clr-btn">Clear</button>
<button id="div-btn">/</button>
<button id="times-btn">x</button>
<button id="plus-btn">+</button>
<button id="minus-btn">-</button>
<button id="equals-btn">=</button>
</div>
</div>
</div>
<footer class="footer-container">
<h2 id="footer-text">Keeping it simple.</h2>
</footer>
</div>
</body>
<script src="script.js">
</script>
</html>
`Я строю простой калькулятор в основах c HTML / CSS и JS. Моей целью было разделить сам калькулятор на 3 деления:
- отображение уравнения
- di git кнопки
- функциональные кнопки
Калькулятор сам по себе является сеткой, и я пытаюсь настроить отображение двух кнопок на сетку. Мой код для этого CSS:
.calculator {
display:grid;
grid-template:
"a a"
"b c";
grid-gap: 5px;
}
.numbers-container {
display: grid;
grid-template:
"seven eight nine"
"four five six"
"one two three"
" zer ";
grid-area: b;
background-color: blue;
}
#seven-btn {
grid-area: seven;
}
#eight-btn {
grid-area: eight;
}
#nine-btn {
grid-area: nine;
} // etc...
Моя проблема в том, что контейнер чисел исчезает после того, как я добавлю display: grid к его CSS. Первое изображение перед добавлением display: grid в контейнер с числами, второе изображение после того, как я добавил эту строку. до после