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

【问题标题】：How to align items to rightmost edge of multi-column span (css grid)如何将项目与多列跨度的最右边对齐（css网格）
【发布时间】：2022-04-27 17:13:44
【问题描述】：

我正在使用具有 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，但没有成功。

【问题讨论】：

HTML 在哪里？和200px 的css 代码。提出一个有效的 sn-p 说明问题。

标签： css css-grid css-multicolumn-layout

【解决方案1】：

使用

float : right;

或

margin-right:0;

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

【讨论】：

【解决方案2】：

我想你需要的是grid-column-end

因此分配grid-column-end: 5 应该可以完成这项工作。

【讨论】：