如何创建具有不同列宽的动态网格

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

#grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 定义三列，第一列宽度为1份，第二列宽度为2份，第三列宽度为1份 */
  grid-gap: 10px; /* 定义列之间的间隔 */
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
}

<style>
#grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
}
</style>

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