如何实现响应式布局大屏幕三等分、中屏幕二等分、小屏幕一等分

<section class="container">
  <section class="item"></section>
  <section class="item"></section>
  <section class="item"></section>
  <section class="item"></section>
  <section class="item"></section>
  <section class="item"></section>
</section>

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

.conainer {
  display: grid;
  gap: 1rem;
}

<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></section>

.container {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}