CODEWITHSUNDEEP
htmlcsscss-grid
Interlated
Interlated

Reputation: 5926

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?

enter image description here

Upvotes: 3

Views: 3060

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371223

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

Upvotes: 0

Carol McKay
Carol McKay

Reputation: 2424

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

Upvotes: 5

Related Questions