这是我的代码:
我一直在try 在css中使用网格,但当我想让紫色框变宽并最小化屏幕时,紫色没有响应性,它只是保持不变.我try 使用grid-auto-rows: 100px;
,还提供了max-width
,但它没有改变任何东西.我还try 在container div周围包装一个flexbox,并将display: flex;
与flex-direction
一起应用,但也没有做任何更改.
我还注意到在移除时.紫色css代码,所有内容都是响应性的,所以我在中缺少或没有添加一些内容.需要添加的紫色.
有什么建议可以帮助我做出回应吗?谢谢
.container {
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 1fr;
}
.purple {
grid-row: 3;
grid-column: span 4;
}
/* .panda {
grid-column-start: 5;
}
.tiger {
grid-column-start: 1;
}
*/
.fox {
grid-row: 1 / span 2;
grid-column: 1 / span 3;
}
.zone {
cursor:pointer;
/*display:block;*/
text-align: center;
font-size:10em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
/***********************************************************************
* Purple Background
**********************************************************************/
.purple {
background: #A88BEB; /* Old browsers */
background: -moz-linear-gradient(top, #A88BEB 0%, #F1A7F1 44%, #F8CEEC 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A88BEB), color-stop(44%,#F1A7F1), color-stop(100%,#F8CEEC)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* IE10+ */
background: linear-gradient(top, #A88BEB 0%,#F1A7F1 44%,#F8CEEC 100%); /* W3C */
}
/***********************************************************************
* Brown Background
**********************************************************************/
.brown {
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}
<body>
<div class="container">
<div class="zone green fox">????</div>
<div class="zone red">????</div>
<div class="zone blue">????</div>
<div class="zone yellow">????</div>
<div class="zone purple tiger">????</div>
<div class="zone brown">????</div>
<div class="zone green">????</div>
<div class="zone red">????</div>
<div class="zone blue">????</div>
<div class="zone yellow">????</div>
<div class="zone purple panda">????</div>
<div class="zone brown">????</div>
</div>
</body>