CSS Grid - kalkulator

Omawiamy CSS projektu kalkulatora znalezionego w internecie na Githubie. Później zrobimy własny kalkulator nieco inaczej. Ok, do dzieła.

Więc autor zrobił coś takiego:

<body>
  <div class="calculator-grid">
    <div class="output">
      <div data-previous-operand class="previous-operand"></div>
      <div data-current-operand class="current-operand"></div>
    </div>
    <button data-all-clear class="span-two">AC</button>
    <button data-delete>DEL</button>
    <button data-operation>÷</button>
    <button data-number>1</button>
    <button data-number>2</button>
    <button data-number>3</button>
    <button data-operation>*</button>
    <button data-number>4</button>
    <button data-number>5</button>
    <button data-number>6</button>
    <button data-operation>+</button>
    <button data-number>7</button>
    <button data-number>8</button>
    <button data-number>9</button>
    <button data-operation>-</button>
    <button data-number>.</button>
    <button data-number>0</button>
    <button data-equals class="span-two">=</button>
  </div>
</body>

Mamy porządny reset stylów rozdzielonych na wildcard i body (fonty można by jeszcze w html trzymać):

*, *::before, *::after {
  box-sizing: border-box;
  font-family: Gotham Rounded, sans-serif;
  font-weight: normal;
}

body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #00AAFF, #00FF6C);
}

Ładny gradient jako tło, zatem pilnujemy, aby elementy body nie przysłaniały tego tła (muszą mieć transparent). Bo będziemy mieć grid na całą stronę:

.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  //(...)
}

Ten grid centruje wszystko w środku i zbija do kupy, zaś rozlewa się na całą wysokość viewportu (szerokość również, ale to jak każdy div).

Dalej, co mamy:

.calculator-grid {
  display: grid;
  //(...)
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

Dalej 4 kolumny po 100px, oraz 6 rowów. Pierwszy row, to będzie wyświetlacz kalkulatora, jego wysokość minimum 120px, ale max to nie wiadomo, jaka liczba tam wpadnie, więc niech rośnie.

Dalej, 5 rowów o wysokości 100px. Tam będą trzymane guziki, zatem będzie tak po 4 guziki (suma długości 400px) o wysokości 100px każdy, 5 takich grup, czyli 20 guzików.

No chyba, że któryś będzie zajmował więcej, niż jedną kolumnę, ale nie uprzedzajmy faktów. Dalej:

.calculator-grid > button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid white;
  outline: none;
  background-color: rgba(255, 255, 255, .75);
}

.calculator-grid > button:hover {
  background-color: rgba(255, 255, 255, .9);
}

Zwykłe style buttonow, nic ciekawego. Dalej mamy klasę dla guzika clear oraz równa się, aby mógł zajmować 2 razy więcej szerokości (200px, dwie kolumny):

.span-two {
  grid-column: span 2;
}

Dalej mamy nasz output, czyli pierwszy row:

.output {
  grid-column: 1 / -1;
  background-color: rgba(0, 0, 0, .75);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
}

Element output ma być rozciągnięty na wszystkie 4 kolumny. Ma być flex parentem kolumnowym dla dwóch tekstów, jeden pokazywać będzie liczbę, drugi, powyżej, poprzednią operację.

Czyli tak, skoro kolumna, to align items flex end robi do prawej. Chcemy mieć ten tekst do prawej. Chcemy też, aby ta poprzednia liczba z operatorem była na górze, a obecna liczba na dole.

Możemy odepchnąć je od siebie przez justify content space around, a jako że kolumna, to odpychamy na linii góra/dół (na tej linii, na której układane są itemy).

Ok, to teraz ten, co będzie u góry i na dole tego wyświetlacza na samej górze:

.output .previous-operand {
  color: rgba(255, 255, 255, .75);
  font-size: 1.5rem;
}

.output .current-operand {
  color: white;
  font-size: 2.5rem;
}

Wszystko. Natomiast jest co analizować pod kątem CSSa. Autorem jest WebDevSimplified, ma bardzo dobrego Githuba (i nawet na YT publikuje, ciekawe, frontendowe treści).

CSS Grid – kalkulator