Пытаюсь сделать кнопочную панель web-калькулятора с помощью css-grid. Сама панель:
Получилось сделать такую же. Вот разметка:
<div class="button-table">
<label>Математика</label>
<input type="button" name="plus" id ="plus" value="+">
<input type="button" name="minus" id ="minus" value="-">
<input type="button" name="multiply" id ="multiply" value="*">
<input type="button" name="divide" id ="divide" value="/">
<input type="button" name="pow" id ="pow" value="x^y">
<label>Алгебра</label>
<input type="button" name="abs" id ="abs" value="abs">
<input type="button" name="sort" id ="sort" value="sort">
<input type="button" name="exp" id ="exp" value="exp">
<input type="button" name="ln" id ="ln" value="ln">
<label></label>
<label>Тригонометрия</label>
<input type="button" name="sin" id ="sin" value="sin">
<input type="button" name="cos" id ="cos" value="cos">
<input type="button" name="tg" id ="tg" value="tg">
<input type="button" name="ctg" id ="ctg" value="ctg">
<label></label>
<label>Результат</label>
<input type="button" name="accurate" id ="accurate" value="Точн.">
<input type="button" name="cel" id ="cel" value="cel">
<input type="button" name="floor" id ="floor" value="floor">
<input type="button" name="round" id ="round" value="round">
<input type="button" name="ce" id ="ce" value="ce">
</div>
css:
.button-table {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-flow: column;
border: 12px;
border: solid;
border-color: red;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
Но смущает то, что "ненужные" ячейки во втором и третьем столбце пришлось занять пустыми label
. Если их убрать из разметки панель получается такая:
Можно ли как-то отдельно отрегулировать размер второго и третьего столбца в grid, чтобы не использовать элементы-заглушки?