css - CSS网格：查找每行的最后一项

Question

我有一个带有自动调整列的简单网格。因此，根据可用的屏幕宽度，一个、两个、三个或更多项目会连续显示。

挑战：每行的最后一项应始终采用不同的样式。这可以通过 css 网格开箱即用实现，还是我需要媒体查询？

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

<div class="grid">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>
   <div>Item 6</div>
</div>

标签： csscss-gridresponsive