Как сделать чтобы в grid отсчет шел со второго ряда?

#css #css3 #css_grid

Как сделать так что б последующие элементы не лезли в пространство grid-column: 1
/ 3. Можно ли это реализовать без добавления сторонних тегов в верстку, и без прописывание
каждой кнопке её позиции? Я хочу получить табло простого калькулятора, с кнопкой включения
в правом верхнем углу.



.fild_buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 10px;
}

.btn_number {
  display: block;
  height: 72.5px;
  border: 1px solid #000;
  cursor: pointer;
  font-size: 32px;
}

.btn_reset {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  




    

Ответы

Ответ 1

Воспользуйтесь псевдоэлементом для создания пустоты:

.fild_buttons:before {
  content: "";
  grid-column: span 2;
}


Результат:



.fild_buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 10px;
}

.btn_number {
  display: block;
  height: 72.5px;
  border: 1px solid #000;
  cursor: pointer;
  font-size: 32px;
}

.btn_reset {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

.fild_buttons:before {
  content: "";
  grid-column: span 2;
}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  



Ответ 2

Нашел, решение проще. Правда, пока не разобрался, почему оно работает. Просто не
указывать для .btn_reset {  grid-row: 1 / 2; }



.fild_buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 10px;
}

.btn_number {
  display: block;
  height: 72.5px;
  border: 1px solid #000;
  cursor: pointer;
  font-size: 32px;
}

.btn_reset {
  grid-column: 3 / 5;
}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  





Ну, и то что вышло → https://codepen.io/BlackStar1991/pen/JwjPWV