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

user_1099823 0
Viewed 2366

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?

enter image description here

css-grid css html
3 Answers

.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; 
}
user_15405700

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:

enter image description here

Add this to your code:

ul {
   margin: 0;
   padding: 0;
}
user_35972760

It's because of Clearfix class you've used on ul element. Clearfix adds :before and :after as a children, therefore CSS Grid consider them as items.

Remove the clearfix and handle it with following style:

float: left;
width: 100%
user_26790140
Related