html - 显示网格模拟 flex-wrap
问题描述
我有下一个网格:
.item1 { grid-area: left; }
.item2 { grid-area: left2; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.grid-container {
display: grid;
grid-template-areas:
'left left main main main right'
'left2 left2 main main main right';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
grid-template-columns: repeat(auto-fill);
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">left1</div>
<div class="item2">left2</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
</div>
当屏幕变小时,如何为这个网格申请一个换行功能?
EX:当我调整屏幕大小时,块应该在一列中对齐(一个在一个之上)。
解决方案
.item1 { grid-area: left; }
.item2 { grid-area: left2; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.grid-container {
display: grid;
grid-template-areas:
'left left main main main right'
'left2 left2 main main main right';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
grid-template-columns: repeat(auto-fill);
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@media only screen and (max-width: 600px) {
.grid-container {
display:flex;
flex-direction:column;
}
}
<div class="grid-container">
<div class="item1">left1</div>
<div class="item2">left2</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
</div>
尝试将此部分添加到您的代码中。
@media only screen and (max-width: 600px) {
.grid-container {
display:flex;
flex-direction:column;
}
}
推荐阅读
- python - 从 CuDNNLSTM 到密集层的麻烦
- chef-infra - OpsWorks for Chef Automate 和 Chef 验证器密钥
- javascript - 对象不支持属性或方法“forEach”IE 11
- javascript - 使用 PHP 或 JavaScript 绘制矢量头像
- php - 如何使用 php curl 和简单的 html dom 解析器获取 span 标签值?未显示确切值
- javascript - div 的调整大小被忽略
- javascript - 菜单设计 - 添加更多菜单选项
- python - 如何对列中的特定值进行分组?
- haskell - 是否可以定义可变参数类型的数据类型?
- python - Python中的正则表达式,用于匹配可能有也可能没有某些部分的模式