0

I'm working with a CSS grid layout with a 20 column span. For ne of my grid items I've specified that it span 5 columns, like so:

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

   .grid-item-a {
     grid-column: span 5;
   }

The content in .grid-item-a does not (and should not) fill the entire width of those 5 columns (they have a fixed width of 200px); I specified 5 columns there to set the distance between it and the content adjacent to it. However, the content in .grid-item-a is aligned to the leftmost side of that span. Is there anyway to align it all the way to the right? I've tried using align-items and justify-items but have had no luck.

tx291
  • 1,251
  • 6
  • 24
  • 42
  • Where's the Html ? and the css code for the `200px`. Put up a working snippet illustrating the issue. – Rainbow May 13 '20 at 12:49

2 Answers2

0

use

float : right;

or

margin-right:0;

in your Code. Hope it Helps!

theencryptedone
  • 101
  • 6
0

I think what you need here is grid-column-end

Therefore assigning grid-column-end: 5 should do the job.

More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end

Vasilis Tsirimokos
  • 205
  • 2
  • 10