position elements on a grid

Question

I’m trying to make a calculator and I’m not being able to let the round buttons get a little flat, also I’m not being able to leave the 0 the same way it is in the picture I wanted to know how to position the 0 the same way as the picture.

.container {
  margin: 0 auto;
  position: relative;
  width: 335px;
  padding: 10px;
  background: black;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-gap: 16px; */
}

.container > div {
  text-align: center;
  padding: 25px;
  /* font-size: 30px; */
  border-radius: 50%;
  color: white;
  margin: 0 7px 11px 0;
  font-family: sans-serif;
  cursor: pointer;
}


/* 192 */

.item1 {
  background-color: #a5a5a5;
  color: black;
}

.item2 {
  background-color: #fe9e09;
}

.item3,
.item4 {
  background-color: #333333;
}

.teste {
  color: white;
  margin-bottom: 77px;
  margin-top: 441;
  background: transparent;
  box-shadow: none;
  font-size: 80px;
}

<div class='container'>
  <div class="item1">AC</div>
  <div class="item1">+/-</div>
  <div class="item1">%</div>
  <div class="item2">:</div>
  <div class="item3">7</div>
  <div class="item3">8</div>
  <div class="item3">9</div>
  <div class="item2">x</div>
  <div class="item3">4</div>
  <div class="item3">5</div>
  <div class="item3">6</div>
  <div class="item2">-</div>
  <div class="item3">1</div>
  <div class="item3">2</div>
  <div class="item3">3</div>
  <div class="item2">+</div>
  <div class="item4">0</div>
  <!-- <div class='item4'></div>  -->
  <div class="item3">,</div>
  <div class="item2">=</div>
</div>

Answer 1

There in his .item4 , create a separate rule and place:

.item4 {
  grid-column: span 2; 
  text-align: left !important;
  border-radius: 70px !important; 
}

• grid-column: span 2; causes the element 0 occupy the width of 2 elements
• border-radius: 70px !important; necessary to overwrite the rule, but this is not a good practice. I put it only to exemplify.
• text-align: left !important; as suggested in the comments, to keep the text of 0 left-aligned.

Answer 2

Your problem is in relation to property padding CSS, below some guidelines:

• if you add only one value, so padding:25px; the value will be assigned to all sides of the element, ie: top, right, bottom, left, respectively.
• When adding 2 values, padding:28px 25px; (what I did to work), the values will be assigned to the axes y (height) and x (width)
• When adding 4 values, for example: padding: 10px 10px 10px10px; values will be assigned in order: top, right, bottom, left.

You can also assign the values for each side when using padding-top:28px; padding-right:25px; padding-bottom:28px; padding-left:25px; . When describing the positions you make it easier to read but the code also gets more macaroni.

.container {
  margin: 0 auto;
  position: relative;
  width: 335px;
  padding: 10px;
  background: black;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-gap: 16px; */
}

.container > div {
  text-align: center;
  padding: 28px 25px;
  /* font-size: 30px; */
  border-radius: 50%;
  color: white;
  margin: 0 7px 11px 0;
  font-family: sans-serif;
  cursor: pointer;
}


/* 192 */

.item1 {
  background-color: #a5a5a5;
  color: black;
}

.item2 {
  background-color: #fe9e09;
}

.item3,
.item4 {
  background-color: #333333;
}

.teste {
  color: white;
  margin-bottom: 77px;
  margin-top: 441;
  background: transparent;
  box-shadow: none;
  font-size: 80px;
}

<div class='container'>
  <div class="item1">AC</div>
  <div class="item1">+/-</div>
  <div class="item1">%</div>
  <div class="item2">:</div>
  <div class="item3">7</div>
  <div class="item3">8</div>
  <div class="item3">9</div>
  <div class="item2">x</div>
  <div class="item3">4</div>
  <div class="item3">5</div>
  <div class="item3">6</div>
  <div class="item2">-</div>
  <div class="item3">1</div>
  <div class="item3">2</div>
  <div class="item3">3</div>
  <div class="item2">+</div>
  <div class="item4">0</div>
  <!-- <div class='item4'></div>  -->
  <div class="item3">,</div>
  <div class="item2">=</div>
</div>