第 39 期(W3C 标准-CSS-响应式布局)：基于Grid的响应式布局

[wingmeng]

题目：

请结合下述代码，实现如下图所示的响应式布局效果：

要求：

• 每个盒子宽度自适应，最小宽度为 100px，高度为 50px，盒子间距 5px；
• 盒子呈横向排列，父容器有更多的可用空间时，每列平均分配宽度，父容器宽度不足时盒子自动换行；
• 请使用纯 CSS 实现。

.container {
  
}

.container > div {
  text-align: center;
  font-size: 32px;
  line-height: 50px;
  color: #fff;
}

.container > div:nth-child(1) {background: #ADF2B7;}
.container > div:nth-child(2) {background: #FEE87A;}
.container > div:nth-child(3) {background: #5DFDFB;}
.container > div:nth-child(4) {background: #E5B5FC;}
.container > div:nth-child(5) {background: #8DFCCA;}
.container > div:nth-child(6) {background: #FE985F;}

---

参考答案：

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: repeat(2, 50px);
}

.container > div {
  text-align: center;
  font-size: 32px;
  line-height: 50px;
  color: #fff;
}

.container > div:nth-child(1) {background: #ADF2B7;}
.container > div:nth-child(2) {background: #FEE87A;}
.container > div:nth-child(3) {background: #5DFDFB;}
.container > div:nth-child(4) {background: #E5B5FC;}
.container > div:nth-child(5) {background: #8DFCCA;}
.container > div:nth-child(6) {background: #FE985F;}