如何在网格布局中右对齐最后一项

在网格布局中，要实现将最后一项右对齐的效果，可以使用grid-column-start和grid-column-end属性来定义每一项所占据的网格列范围。

首先，给网格容器添加以下样式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

这里使用了repeat(auto-fit, minmax(200px, 1fr))来定义网格容器的列，它会自动根据容器宽度调整每个网格项的列数，每一列的最小宽度为200px，最大宽度为剩余空间的1fr。

然后，在最后一项的样式中，添加以下样式：

.last-item {
  grid-column-start: -1;
  grid-column-end: -1;
}

通过将grid-column-start和grid-column-end都设置为-1，表示将该项放置在最后一列。

这样，最后一项就会被右对齐在网格布局中。在实际应用中，你可以根据具体情况修改网格容器和最后一项的类名，并根据需要设置其他样式属性。

参考链接：

• CSS Grid Layout - MDN