'How to align items to rightmost edge of multi-column span (css grid)

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.

csscss-gridcss-multicolumn-layout


Solution 1:[1]

use

float : right;

or

margin-right:0;

in your Code. Hope it Helps! ?

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 theencryptedone
Solution 2 Vasilis Tsirimokos

Related Questions