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

149

30 мая 2019, 21:40

Как сделать так что б последующие элементы не лезли в пространство 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; 
}

<div class="fild_buttons"> 
  <button class="btn_number  btn_reset" type="button">RESET</button> 
  <button class="btn_number  btn_7" type="button">7</button> 
  <button class="btn_number  btn_8" type="button">8</button> 
  <button class="btn_number  btn_9" type="button">9</button> 
  <button class="btn_number  btn_divide " type="button">/</button> 
  <button class="btn_number  btn_4" type="button">4</button> 
  <button class="btn_number  btn_5" type="button">5</button> 
  <button class="btn_number  btn_6" type="button">6</button> 
  <button class="btn_number  btn_multiply" type="button">X</button> 
  <button class="btn_number  btn_1" type="button">1</button> 
  <button class="btn_number  btn_2" type="button">2</button> 
  <button class="btn_number  btn_3" type="button">3</button> 
  <button class="btn_number  btn_substract" type="button">-</button> 
  <button class="btn_number  btn_0" type="button">0</button> 
  <button class="btn_number  btn_point" type="button">.</button> 
  <button class="btn_number  btn_result" type="button">=</button> 
  <button class="btn_number  btn_plus" type="button">+</button> 
</div>

Answer 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; 
}

<div class="fild_buttons"> 
  <button class="btn_number  btn_reset" type="button">RESET</button> 
  <button class="btn_number  btn_7" type="button">7</button> 
  <button class="btn_number  btn_8" type="button">8</button> 
  <button class="btn_number  btn_9" type="button">9</button> 
  <button class="btn_number  btn_divide " type="button">/</button> 
  <button class="btn_number  btn_4" type="button">4</button> 
  <button class="btn_number  btn_5" type="button">5</button> 
  <button class="btn_number  btn_6" type="button">6</button> 
  <button class="btn_number  btn_multiply" type="button">X</button> 
  <button class="btn_number  btn_1" type="button">1</button> 
  <button class="btn_number  btn_2" type="button">2</button> 
  <button class="btn_number  btn_3" type="button">3</button> 
  <button class="btn_number  btn_substract" type="button">-</button> 
  <button class="btn_number  btn_0" type="button">0</button> 
  <button class="btn_number  btn_point" type="button">.</button> 
  <button class="btn_number  btn_result" type="button">=</button> 
  <button class="btn_number  btn_plus" type="button">+</button> 
</div>

Answer 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; 
}

<div class="fild_buttons"> 
  <button class="btn_number  btn_reset" type="button">RESET</button> 
  <button class="btn_number  btn_7" type="button">7</button> 
  <button class="btn_number  btn_8" type="button">8</button> 
  <button class="btn_number  btn_9" type="button">9</button> 
  <button class="btn_number  btn_divide " type="button">/</button> 
  <button class="btn_number  btn_4" type="button">4</button> 
  <button class="btn_number  btn_5" type="button">5</button> 
  <button class="btn_number  btn_6" type="button">6</button> 
  <button class="btn_number  btn_multiply" type="button">X</button> 
  <button class="btn_number  btn_1" type="button">1</button> 
  <button class="btn_number  btn_2" type="button">2</button> 
  <button class="btn_number  btn_3" type="button">3</button> 
  <button class="btn_number  btn_substract" type="button">-</button> 
  <button class="btn_number  btn_0" type="button">0</button> 
  <button class="btn_number  btn_point" type="button">.</button> 
  <button class="btn_number  btn_result" type="button">=</button> 
  <button class="btn_number  btn_plus" type="button">+</button> 
</div>