How do I remove the first empty column in a CSS grid?

问题

I've got an empty column at the start and can't work out why?

<ul class="inrpager clearfix">
  <li class="inrpager-previous"> </li>
  <li class="inrpager-title">Overview</li>
  <li class="inrpager-next">test</li>
</ul>

The css code maps a grid template

body.not-front ul.inrpager {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
}

The result is that the content is mapped from the middle column. Why is that?

回答1:

.clearfix will probably be throwing in a ::before and possible an ::after with display table et all which does not play well with grid layout so..

css:

/* position absolute breaks it free and clear from the grid layout */
ul.inrpager.clearfix::before {
  position:absolute; 
}

ul.inrpager.clearfix::after {
  position:absolute; 
}

回答2:

I don't think it's an extra column.

It looks like the default margin or padding added by browsers to list elements.

Check the default styles on your ul.

Also see this W3C default style sheet sample:

Add this to your code:

ul {
   margin: 0;
   padding: 0;
}

来源：https://stackoverflow.com/questions/53128704/how-do-i-remove-the-first-empty-column-in-a-css-grid