Как выделить весь элемент сетки с помощью CSS-сеток, сохраняя выравнивание по центру элементов и оставаясь неподвижным - PullRequest
Новая
       21

Как выделить весь элемент сетки с помощью CSS-сеток, сохраняя выравнивание по центру элементов и оставаясь неподвижным

0 голосов
/ 25 сентября 2019

Я делаю веб-приложение для калькулятора, и у меня возникают трудности, когда речь идет о наведении курсора на число / символ.Я сделал весь калькулятор сеткой, и центр выровнял элементы по центру элементов выравнивания.Когда я это делаю и при наведении курсора, только текст получает нижнюю границу.Я хотел бы, чтобы весь элемент сетки получал нижнюю границу при наведении каждого номера / элемента.

Я пытался убрать align-items: center, и это работает, но числа / элементы не центрированы, и я должен использовать отступы, чтобы это исправить.Тем не менее, я не могу разместить все предметы, где бы я хотел.Например, я хотел бы, чтобы символ равенства был вертикально центрирован между тремя полями, которые он охватывает, но кажется невозможным, когда мне приходится полагаться на отступы.

Кроме того, когда я наводю курсор на предметы, предметы движутся вверх, что нежелательно.Если это простое исправление, я буду признателен за любую поддержку. 

:root {
  --primary-dark: rgb(170, 172, 252);
  --primary-light: #f29191;
  --background: #eee; }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-size: 62.5%; }

body {
  font-family: sans-serif;
  background-color: var(--background);
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400; }

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: min-content repeat(6, 1fr);
  min-height: 65rem;
  max-width: 40rem;
  margin: 20vh auto;
  text-align: center;
  align-items:center;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, 0.2);
  border-radius: 1rem; }
  .calculator__mode {
    color: #fff;
    letter-spacing: 1px;
    margin-top: 1.5rem;
    font-weight: normal;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); }
    .calculator__mode:hover {
      transform: translateY(-3px); }
  .calculator__input {
    grid-column: 1/ -1;
    background-color: transparent;
    color: #fff;
    padding: 1rem 5rem 1rem 0rem;
    font-size: 3rem;
    border: none;
    cursor: pointer;
    text-align: right; }
  .calculator .btn {
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    padding-top: 2.7rem; }
    .calculator .btn:hover {
      border-bottom: 5px solid #eee; }
    .calculator .btn:active {
      background-color: var(--primary-light);
      opacity: 50%;
      border: none; }
  .calculator__0 {
    grid-column: 1/ span 1;
    grid-row: 7/ span 1; }
  .calculator__1 {
    grid-column: 1/ span 1;
    grid-row: 6/ span 1; }
  .calculator__2 {
    grid-column: 2/ span 1;
    grid-row: 6/ span 1; }
  .calculator__3 {
    grid-column: 3/ span 1;
    grid-row: 6/ span 1; }
  .calculator__4 {
    grid-column: 1/ span 1;
    grid-row: 5/ span 1; }
  .calculator__5 {
    grid-column: 2/ span 1;
    grid-row: 5/ span 1; }
  .calculator__6 {
    grid-column: 3/ span 1;
    grid-row: 5/ span 1; }
  .calculator__7 {
    grid-column: 1/ span 1;
    grid-row: 4/ span 1; }
  .calculator__8 {
    grid-column: 2/ span 1;
    grid-row: 4/ span 1; }
  .calculator__9 {
    grid-column: 3/ span 1;
    grid-row: 4/ span 1; }
  .calculator__decimal {
    grid-column: 2/ span 1;
    grid-row: 7/ span 1; }
  .calculator__negative {
    grid-column: 3/ span 1;
    grid-row: 7/ span 1; }
  .calculator__clear {
    grid-column: 4/ span 1;
    grid-row: 7/ span 1; }
  .calculator__equal {
    grid-column: 4/ span 1;
    grid-row: 4/span 3;
    padding-top: 10rem; }
  .calculator__plus {
    grid-column: 1/ span 1;
    grid-row: 3/ span 1; }
  .calculator__minus {
    grid-column: 2/ span 1;
    grid-row: 3/ span 1; }
  .calculator__divide {
    grid-column: 3/ span 1;
    grid-row: 3/ span 1; }
  .calculator__multiply {
    grid-column: 4/ span 1;
    grid-row: 3/span 1; }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>Calculator</title>
</head>

<body>
    <div class="container">
        <div class="calculator">
            <h3 class="calculator__mode">Regular</h3>
            <input class="calculator__input" type="text" placeholder="enter here">

            <div class="btn calculator__plus">+</div>
            <div class="btn calculator__minus">&#8722;</div>
            <div class="btn calculator__divide">&#247;</div>
            <div class="btn calculator__multiply">&#215</div>
            <div class="btn calculator__equal">=</div>

            <div class="btn calculator__0">0</div>
            <div class="btn calculator__1">1</div>
            <div class="btn calculator__2">2</div>
            <div class="btn calculator__3">3</div>
            <div class="btn calculator__4">4</div>
            <div class="btn calculator__5">5</div>
            <div class="btn calculator__6">6</div>
            <div class="btn calculator__7">7</div>
            <div class="btn calculator__8">8</div>
            <div class="btn calculator__9">9</div>

            <div class="btn calculator__decimal">.</div>
            <div class="btn calculator__negative">-</div>
            <div class="btn calculator__clear">C</div>

        </div>

    </div>
</body>

</html>

1 Ответ

1 голос
/ 25 сентября 2019

Добавление высоты: 100% для кнопок работает.Я также удалил фиксированный отступ для кнопок и изменил его, чтобы отобразить flex.Измените CSS для кнопки следующим образом: 

.calculator .btn {
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

Также не забудьте удалить отступы для кнопки, равной кнопке: 

.calculator__equal {
    grid-column: 4/ span 1;
    grid-row: 4/span 3;
}
...