Indent in CSS Grid

Question

I have a header with 4 buttons, I divide it into 6 columns and I want to leave the first and the last empty, and place the buttons in the center.

.test {
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  align-items: center;
  justify-content: center;
}

However, if I use grid-column-start: 2, the buttons are rearranged down.

Answer 1

Use grid-column-start: 2 only on the first button using button:first-child. You have the issue as you are setting grid-column-start on all buttons - see demo below:

.test {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.test button:first-child {
  grid-column-start: 2;
}

<div class="test">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>