Не позволяйте сетке занимать всю ширину своего родителя. - PullRequest
Новая
       7

Не позволяйте сетке занимать всю ширину своего родителя.

2 голосов
/ 22 января 2020

Учитывая приведенный ниже фрагмент кода, как я могу запретить элементу .sampler занимать всю ширину родительского элемента (body) и иметь ширину всего 320 пикселей (4 x 80 пикселей)?

Мое понимание сетки состоит в том, что установка его в 4 столбца 80px каждый (repeat(4, 80px)) дает ему фиксированную ширину, но, похоже, это не так. 

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%:
}

.sampler {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: 100px 50px 500px;
  background: rgb(210, 210, 210);
}

.waveform {
  grid-column: 1 / 5;
  border: 1px solid black;
}

.settings {
  grid-column: 1 / 5;
  border: 1px solid black;
}

.pads {
  display: grid;
  grid-column: 1 / 5;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto;
  grid-gap: 2px;
}

.pad {
  border: 1px solid black;
}
<div class="sampler">
  <div class="waveform"></div>
  <div class="settings"></div>
  <div class="pads">
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
    <div class="pad"></div>
  </div>
</div>

1 Ответ

0 голосов
/ 22 января 2020

Переключение с display: grid на display: inline-grid.

По умолчанию:

  • Элементы уровня блока принимают ширину родительского элемента, а

  • Элементы встроенного уровня принимают ширину своего содержимого.

...