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>