Prevent grid from taking up the whole width of its parent

Question

Given the snippet below, how can I prevent the .sampler element from taking up the whole width of its parent (body) and only be 320px wide (4 x 80px)?

My understanding of grid is that setting it to 4 columns 80px each (repeat(4, 80px)) results in giving it a fixed width, but this does not seem to be the case.

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>

Answer 1

Switch from display: grid to display: inline-grid.

By default:

• Block level elements take the width of their parent, and

• Inline-level elements take the width of their content.