网格面积问题不适用于自动拟合

时间:2018-11-01 15:46:29

标签: css

所以我有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;}

0 个答案:

没有答案