How could I center a grid container horizontally to the window?

Question

I've seen a lot of answers pertaining to grid elements, but I would like to center a grid container horizontally. Here's a snippet of the code I have right now.

.htable {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.hlines {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

results[type='table'] {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

results[type='lines'] {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

form {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

content {
  display: grid;
  grid-template-rows: 5vw 85vw;
  grid-template-columns: 20vw 35vw 35vw;
  margin: auto;
}

<content>
  <form>
    <br>
    <uinput type='pulse'>
      <label for='pulse'>pulse:</label>
      <input type='number' class='pulse' min='2' maxlength='2' oninput='...'>
    </uinput><br><br>
    <uinput type='cpulse'>
      <label for='cpulse'>counterpulse:</label>
      <input type='number' class='cpulse' min='2' maxlength='2' oninput='...'><br><br>
    </uinput>
  </form>

  <br>
  <h3 class='htable'>table</h3>
  <results type='table'>
    <tableWrap>
      <p class='resolve'></p>

      <!--Table will be injected here-->

    </tableWrap>
  </results>

  <h3 class='hlines'>line diagram</h3>
  <results type='lines'>
    <linesWrap>
      <canvas class='lines' width=500px></canvas>
    </linesWrap>
  </results>
</content>

I hope that's all the code that's needed so there isn't a need to comb through my messy code. Again, I'd like to center the grid container (as in the content element).

Full source code here, if needed.

Try adding `display: flex; justify-content: center` to the parent element (in this case, `body`). — Michael Benjamin, Dec 17 '19 at 04:38

score 0 · Answer 1 · answered Dec 17 '19 at 05:30

In your case, your grid-template-columns is 20vw 35vw 35vw, 20 + 35 + 35 = 90. So to center it you could add padding: 0 5vw or margin: 0 5vw to the grid and it will work without touching the parent element.

content {
  display: grid;
  grid-template-rows: 5vw 85vw;
  grid-template-columns: 20vw 35vw 35vw;
  margin: 0 5vw;
  /* or padding: 0 5vw; */
}

How could I center a grid container horizontally to the window?

1 Answers1