所以我有9个div,我尝试使用自动调整功能,但这会破坏我的布局 因此,当我将布局扩展到最小时,我只需要1 div
.grid {max-width: 1500px;display: grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));grid-gap: 2px;}
* {box-sizing: border-box;} body {
font-size: 1.4em;
font-family: 'Varela Round', sans-serif;
font-weight: bold;
color: #6e859c;
padding: 0;
margin: 0;
background: #e8e9e9;} .grid {
background: #fff;
border-radius: 0.285em;
box-shadow: 0 0.1em 0 0 rgba(0,0,0,0.1);
margin: 45px auto;
grid-template-areas:
"a b d d e h"
"a c d d f h"
"i i i j j j"} .item { color: #fff; text-shadow: 0 2px 0 rgba(110,133,156,0.18); padding: 0.85em; background: #6e859c; border: solid 1px rgba(110,133,156,0.15); border-radius: 0.3em;}.item1 { grid-area: a;}.item2 { grid-area: b;}.item3 { grid-area: c;}.item4 { grid-area: d; }.item5 { grid-area: e;}.item6 { grid-area: f;}.item7 { grid-area: h;}.item8 { grid-area: i;}.item9 { grid-area: j;}