如何将项目对齐到多列跨度的最右边缘（css网格）

Question

我正在使用20列跨度的CSS网格布局。对于我的网格项，我已指定它跨越5列，如下所示：

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

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

.grid-item-a中的内容不会（也不应该）填充这5列的整个宽度（它们的固定宽度为200px）；我在那里指定了5列以设置它与相邻内容之间的距离。但是，.grid-item-a中的内容与该范围的最左侧对齐。无论如何，是否一直将其一直对齐？我尝试使用align-items和justify-items，但没有运气。

Answer 1

使用

float : right;

或

margin-right:0;

在您的代码中。希望能帮助到你！ 😊