Как сделать панель с кнопками на гридах

Технология css grid очень удобна для получения достаточно опрятного внешнего вида сайта даже если вы не дизайнер. Автоматика расставляет элементы равномерно по ячейкам и вы сразу же получаете красоту вместо свалки, как это происходит при верстке классическим css.

Ниже приведён простой пример на css grid, подходящий для размещения кнопок панели управления:

<!-- Панель и кнопки -->
<div class="grid">
    <div class="grid-button">Кнопка 1</div>
    <div class="grid-button">Кнопка 2</div>
    <div class="grid-button">Кнопка 3</div>
</div>
    
<!-- Стили -->
<style>
.grid {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 5px;
    justify-content: start;
}
.grid-button {
    border: 1px solid #88766f;
    color: #ffffff;
    background: #b19887;
    cursor: pointer;
    padding: 7px 9px 7px 9px;
    border-radius: 3px;
}
</style>

Посмотреть и пощелкать живой пример можно на Codepen:

А вот парочка ссылок на Ютюб от самой разработчицы гридов, очень рекомендуем ознакомиться, немножко подучиться и перестать мучаться с хаками css. Включите субтитры, нажмите на шестеренку и включите перевод на русский. Очень интересно узнавать о технологии от самих разработчиков, о том что они не с бухты-барахты делали как стандартный css, а именно все хорошо обдумали и искали оптимальные решения.

https://www.youtube.com/watch?v=8ti7o-sQuYs

https://www.youtube.com/watch?v=N5Lt1SLqBmQ

PS: Кстати по умолчанию гриды тянутся во всю высоту контента и иногда их нужно поджимать и делать прокручиваемыми. Делается это легко, добавлением min-height: 0; Так что не городите лишние обертки, просто добавьте это свойство.