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

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 473 (opens new window)

Author

页面布局元素如下，item 数量不固定

<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>

使用 Grid 布局可以轻松解决这个问题，如若使用其它方案，控制好等分的同时再控制好间距也是一个十分头疼的问题:

grid-template-columns: 控制等分
gap: 控制间隙

效果可见 codepen (opens new window)

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

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

.container {
  display: grid;
}

.conainer {
  gap: 1rem;
}

TailwindCSS 是一款非常方便的 CSS 原子类框架，只需要一行即可搞定

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

但是这就够了吗？

这远远不够，这也足够复杂！

需要媒体查询
需要人为设置 breakpoint，设置大小屏幕的边界

# 终极解决方案

Grid 布局可以自动判断容器大小，无论大小屏幕自动撑满并均分，请看以下属性

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

repeat: 用以 N 整分
auto-fill：表示自动填充
minmx: 即书面意思，最小宽度为 300px

使用终极解决方案的在线页面 (opens new window)

Author

回答者: qiutian00 (opens new window)

终极解决方案正好在用。

Author

回答者: nmsn (opens new window)

页面布局元素如下，item 数量不固定
<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>
使用 Grid 布局可以轻松解决这个问题，如若使用其它方案，控制好等分的同时再控制好间距也是一个十分头疼的问题:

grid-template-columns: 控制等分

gap: 控制间隙

效果可见 codepen (opens new window)
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.container {
  display: grid;
}

.conainer {
  gap: 1rem;
}
TailwindCSS 是一款非常方便的 CSS 原子类框架，只需要一行即可搞定
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
但是这就够了吗？

这远远不够，这也足够复杂！

需要媒体查询

需要人为设置 breakpoint，设置大小屏幕的边界

# 终极解决方案

Grid 布局可以自动判断容器大小，无论大小屏幕自动撑满并均分，请看以下属性
.container {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
repeat: 用以 N 整分

auto-fill：表示自动填充

minmx: 即书面意思，最小宽度为 300px

使用终极解决方案的在线页面 (opens new window)

链接跳过去是图标大全

Author

回答者: shfshanyue (opens new window)

@nmsn 这是效果，查看源码即可

← 27. 介绍 CSS 隐藏页面中某个元素的几种方法 29. 前端开发中如何进行多主题配置 →