如何在屏幕上拉伸布局，但使内容变得更窄？

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    flex: 1 0 300px; /* 设置子元素的宽度为300px，可以根据需要调整 */
  }
  @media (max-width: 768px) {
    .item {
      flex-basis: 100%; /* 在屏幕宽度小于768px时，子元素宽度变为100% */
    }
  }
</style>
<div class="container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 设置列的宽度为300px，可以根据需要调整 */
    grid-gap: 10px; /* 设置列之间的间距，可以根据需要调整 */
  }
  @media (max-width: 768px) {
    .container {
      grid-template-columns: 1fr; /* 在屏幕宽度小于768px时，只有一列 */
    }
  }
</style>
<div class="container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
</div>