``` ">

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

Issue

欢迎在 Issue 中交流与讨论: Issue 473 (opens new window)

使用 Grid 布局可以轻松解决这个问题:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
@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;
  grid-gap: 1rem;
  gap: 1rem;
}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
Last Updated: 2/24/2021, 8:56:13 AM