Не убираются отступы между grid элементами

Question

Нужно реализовать такой toolbar с анимацией. После его раскрытия кнопка open должна располагаться внизу (то есть стать кнопкой закрытия). Выстроил элементы через grid сетку и решил через js поменять order для перемещения элемента в конец. Но возникли проблемы с отступами (между замком и кнопкой открытия/закрытия есть отступы, а у других элементов нету). Присвоил gap нулевое значение но это не помогло.

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Draft</title>
    <link rel="stylesheet" href="draft.css">
    <script src="script.js"></script>
</head>

<body>
<div class="sidebar toolbar">
    <div class="open toolbar-btn" onclick="openToolbar()">
        <img src="../img/icons/chevron.svg" alt="Open" class="chevron chevron-down" draggable="false">
    </div>

    <div class="work-tools">
        <div class="font toolbar-btn">
            <img src="../img/icons/font.svg" alt="">
        </div>
        <div class="underline toolbar-btn">
            <img src="../img/icons/underline.svg" alt="">
        </div>
        <div class="italic toolbar-btn">
            <img src="../img/icons/italic.svg" alt="">
        </div>
        <div class="color toolbar-btn">
            <img src="../img/icons/color.svg" alt="">
        </div>
        <div class="resize toolbar-btn">
            <img src="../img/icons/resize.svg" alt="">
        </div>
        <div class="download toolbar-btn">
            <img src="../img/icons/download.svg" alt="">
        </div>
    </div>


    <div class="lock toolbar-btn">
        <img src="../img/icons/lock.svg" alt="">
    </div>
</div>



</body>
</html>

CSS

@import "../css/nullstyle";

$scroll-color: linear-gradient(180deg, #A00BC5 0%, #1B5454 100%);
$scroll-color-hover: linear-gradient(180deg, #D012FF 0%, #0B9191 100%);
$panels-color: linear-gradient(90deg, #161616 -23.12%, #262525 100%);

.open {
  transition: transform 300ms;
}

.open:hover {
  .chevron-down {
    transform: translateY(7px);
  }
}

.chevron {
  transition: inherit;
}

.toolbar {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  background: $panels-color;
  overflow: hidden;
  display: grid;
  grid-column-gap: 0px;


  transition: height 300ms;

  .toolbar-btn {
    display: grid;
    justify-items: center;
    align-items: center;
    width: 80px;
    height: 80px;
  }

  .work-tools {

  }

  .open {
    //transition: transform 300ms;;
  }

  .chevron {

  }

}

JS

function openToolbar () {
    document.querySelector('.toolbar').style.height = '720px';
    document.querySelector('.open').style.order = '3';
}

БЛОГ НА HUSL

Не убираются отступы между grid элементами

Ответы (0 шт):