CSS Grid: центрирование и дублирование трудностей - PullRequest
Новая
       2

CSS Grid: центрирование и дублирование трудностей

0 голосов
/ 18 апреля 2019

Я пытаюсь создать простой калькулятор, использующий только HTML и CSS для макета и, в конечном счете, чистый JavaScript для функций.

Я хочу, чтобы сайт / страница были адаптивными, вот почему яиспользование CSS Grid и отсутствие абсолютных единиц;% и fr вместо px ...

Сам калькулятор должен представлять собой сетку из центрированных квадратов с текстом в кнопках, центрированных как по горизонтали, так и по вертикали, и все кнопки должны вписываться в «калькулятор». 

<html>
   <body>
      <div class="calc">
        <button id="bp">+&nbsp;/&nbsp;-</button>
        <button id="bc">C</button>
        <button id="bb">X</button>
         <button id="b7">7</button>
         <button id="b8">8</button>
         <button id="b9">9</button>
         <button id="b4">4</button>
         <button id="b5">5</button>
         <button id="b6">6</button>
         <button id="b1">1</button>
         <button id="b2">2</button>
         <button id="b3">3</button>
         <button id="bd">.</button>
         <button id="b0">0</button>
         <button id="be">=</button>
      </div>
   </body>
</html>

div.calc {
   max-width: 80%;
   margin: 1% auto;

   border: 2px solid #111111;
   border-radius: 5px;
   padding: 1%;

    display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-gap: 2%;

    justify-items: center;
    align-items: center; 
}

div.calc > button {
   background-color: lightgrey;
   color: darkblue;

   border: 2px solid #111111;
   border-radius: 5px;

   font-size: 2em;
   cursor: pointer;

   vertical-align: center;
   text-align: center;

   width: 100%;
   height: 0;
   padding: 50%;
}

button#bp,
button#bd {
    background-color: blue;
    color: yellow;
}

button#bc {
    background-color: red;
    color: white;
}

button#bb {
    background-color: yellow;
    color: blue;
}

button#be {
    background-color: green;
    color: yellow;
}

Codepen

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

Я пытался поиграть с высотой калькулятора (высота: 100% ...), но последний ряд всегда заканчивается ...

Кажется, я не могу получитьтекст внутри кнопки для правильного центрирования;особенно горизонтально.Кнопка «+ / -» является хорошим примером.Я установил text-align как центр, а и justify-items, и align-items являются center.Я знаю, что последние два относятся к элементам кнопок внутри сетки.Но я не вижу, где еще правильно расположить текст по центру.

Я надеюсь, что это что-то совершенно простое, и я просто смотрю на один и тот же код, снова и снова, о, ослишком много часов.

Если вы не хотите исправлять мой код и предпочитаете указывать мне какие-либо примеры или объяснения в Интернете, которые помогут, я с удовольствием выполню домашнее задание.

Спасибо!

Ответы [ 2 ]

3 голосов
/ 18 апреля 2019

Проблема в grid-gap:2%.Это работает горизонтально, потому что мы можем разрешить 2% на основе ширины, но для высоты это не будет работать, так как не определена высота.По сути, браузер сначала вычисляет высоту без промежутка, а затем добавляется пробел.

Вы должны рассмотреть px или другую единицу, например vw/vh для этого.Я также изменил способ центрирования кнопки.( Центрирование в сетке CSS ) 

div.calc {
  max-width: 80%;
  margin: 1% auto;
  border: 2px solid #111111;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  
  grid-gap: 1vw;
  padding: 1vw; /*make the padding the same*/
}

div.calc>button {
  background-color: lightgrey;
  color: darkblue;
  border: 2px solid #111111;
  border-radius: 5px;
  font-size: 2em;
  cursor: pointer;
  /*to center*/
  display: flex;
  align-items: center;
  justify-content: center;
  /**/
}
/*keep the ratio*/
div.calc>button:before {
  content: "";
  display: inline-block;
  padding-top: 100%;
}
/**/
button#bp,
button#bd {
  background-color: blue;
  color: yellow;
}

button#bc {
  background-color: red;
  color: white;
}

button#bb {
  background-color: yellow;
  color: blue;
}

button#be {
  background-color: green;
  color: yellow;
}
<div class="calc">
    <button id="bp">+&nbsp;/&nbsp;-</button>
    <button id="bc">C</button>
    <button id="bb">X</button>
    <button id="b7">7</button>
    <button id="b8">8</button>
    <button id="b9">9</button>
    <button id="b4">4</button>
    <button id="b5">5</button>
    <button id="b6">6</button>
    <button id="b1">1</button>
    <button id="b2">2</button>
    <button id="b3">3</button>
    <button id="bd">.</button>
    <button id="b0">0</button>
    <button id="be">=</button>
  </div>
1 голос
/ 18 апреля 2019

Альтернативное решение с методом flexbox с трехколоночной кнопкой. Я надеюсь, что это будет полезно для вас. 

* {
    box-sizing: border-box;
    position: relative;
}

div.calc {
    max-width: 80%;
    margin: 1% auto;
    border: 2px solid #111111;
    border-radius: 5px;
    padding: 1%;
    /* display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-gap: 2%;      
	justify-items: center;
	align-items: center;  */
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}

div.calc > button {
    background-color: lightgrey;
    color: darkblue;
    border: 2px solid #111111;
    border-radius: 5px;
    font-size: 2em;
    cursor: pointer;
    vertical-align: center;
    text-align: center;
    height: 0;
    padding: 12%;
    flex-grow: 1;
    width: 31%;
    height: 31%;
    margin: 5px;
}

button#bp,
button#bd {
    background-color: blue;
    color: yellow;
}

button#bc {
    background-color: red;
    color: white;
}

button#bb {
    background-color: yellow;
    color: blue;
}

button#be {
    background-color: green;
    color: yellow;
}
<div class="calc">
    <button id="bp">+&nbsp;/&nbsp;-</button>
    <button id="bc">C</button>
    <button id="bb">X</button>
    <button id="b7">7</button>
    <button id="b8">8</button>
    <button id="b9">9</button>
    <button id="b4">4</button>
    <button id="b5">5</button>
    <button id="b6">6</button>
    <button id="b1">1</button>
    <button id="b2">2</button>
    <button id="b3">3</button>
    <button id="bd">.</button>
    <button id="b0">0</button>
    <button id="be">=</button>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...