第 39 期(W3C 标准-CSS-响应式布局)：基于Grid的响应式布局 #42
Description
题目：
请结合下述代码，实现如下图所示的响应式布局效果：
要求：
- 每个盒子宽度自适应，最小宽度为 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;}