您需要一个3列宽的网格，每一列占据它所能占据的空间（1fr）。
然后你只需要设置第一个项目跨越所有3列，你的CSS已经这样做了。
这个代码片段为第一个项目提供了一个背景颜色，这样我们就可以检查它是否正确跨越。
代码段设置2行，每行的高度由其内容决定。

<div class="grid-container">
  <div class="item-1">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    grid-gap: 20px;
  }
  
  .item {
    background-color: #ddd;
    padding: 20px;
    text-align: center;
  }
  
  .item-1 {
    grid-column: 1 / span 3;
    background: pink;
  }
</style>

这取决于您想如何布局它们，但是这里的documentation展示了各种布局的好例子。

.grid-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr repeat(3, '100%');
  grid-gap: 20px;
}

.item-1 {
  background-color: green;
  grid-column: 1/4;
}

.item {
  grid-row: 2/3;
  background-color: red;
  padding: 20px;
  text-align: center;
}

应该能达到你的目的。
基本上，grid-row: 2/3意味着.item在第二行，但如果你想在第二行中有3个项目，这意味着实际上有4列（这就是网格系统的工作原理）。.item的等宽是自动实现的。所以现在.item-1需要加宽到grid-column: 1/4，这意味着它从列1 - 4跨越。我把宽度100%好的措施和背景颜色为我自己的调试目的。

首先，如果你想在任何类上指定一个样式，而这个类在你的case“item”中包含一个特定的名称
因此，您可以执行以下操作：

[class *="item"] {
    background-color: #ddd;
    padding: 20px;
    text-align: center;
}

[class *=“item”]表示任何类都有item这个词。
其次，要修复网格代码，您必须执行以下操作：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto;
  grid-gap: 20px;
}

基本上使用重复3个地区，每个对与自动宽度或您可以使用1fr太。