如何管理 css 媒體查詢網格列

Question

我有 12 個畫廊縮略圖。 如何指定 4 個媒體查詢，僅允許 6、4、3 或 2 列，同時在每個縮略圖之間保持 10 像素的比例圖像縮放和相等的邊距，而不會導致媒體查詢列規則中斷？ 例如在 min-width: 1000px 它當前顯示 5 列而不是 6

    <main class="gallery">
<a href="#"><img src="https://cdn0.wideopenpets.com/wp-content/uploads/2015/12/snake-in-hats-11feature-image-770x405.png" alt="" class="ctrl" id="btn-1"></a>    
<a href="#"><img src="https://i2.wp.com/metro.co.uk/wp-content/uploads/2015/11/party-snake.jpg?quality=90&strip=all&zoom=1&resize=644%2C427&ssl=1" alt="" class="ctrl" id="btn-6"></a>
<a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQk4j0EKreALTRlYkyIP8kLHfjY-1FcxUuyzjlv3pu2Uh_cdlu1&s" alt="" class="ctrl" id="btn-2"></a>
<a href="#"><img src="https://ball-pythons.net/forums/cache2.php?img=https://41.media.tumblr.com/7f75b21e7edcc2adc45e4eb2f82a362a/tumblr_o52rt6NTRH1s9amz4o7_1280.jpg" alt="" class="ctrl" id="btn-7"></a>
<a href="#"><img src="https://static.boredpanda.com/blog/wp-content/uploads/2015/11/cute-snakes-wear-hats-110__700.jpg" alt="" class="ctrl" id="btn-3"></a>
<a href="#"><img src="https://www.thesun.co.uk/wp-content/uploads/2019/08/NINTCHDBPICT000516637716.jpg" alt="" class="ctrl" id="btn-8"></a>
<a href="#"><img src="https://cdn0.wideopenpets.com/wp-content/uploads/2015/12/snake-in-hats-11feature-image-770x405.png" alt="" class="ctrl" id="btn-4"></a>
<a href="#"><img src="https://i2.wp.com/metro.co.uk/wp-content/uploads/2015/11/party-snake.jpg?quality=90&strip=all&zoom=1&resize=644%2C427&ssl=1" alt="" class="ctrl" id="btn-9"></a>
<a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQk4j0EKreALTRlYkyIP8kLHfjY-1FcxUuyzjlv3pu2Uh_cdlu1&s" alt="" class="ctrl" id="btn-5"></a>
<a href="#"> <img src="https://ball-pythons.net/forums/cache2.php?img=https://41.media.tumblr.com/7f75b21e7edcc2adc45e4eb2f82a362a/tumblr_o52rt6NTRH1s9amz4o7_1280.jpg" alt="" class="ctrl" id="btn-10"></a>
<a href="#"> <img src="https://static.boredpanda.com/blog/wp-content/uploads/2015/11/cute-snakes-wear-hats-110__700.jpg" alt="" class="ctrl" id="btn-11"></a>
<a href="#"> <img src="https://www.thesun.co.uk/wp-content/uploads/2019/08/NINTCHDBPICT000516637716.jpg" alt="" class="ctrl" id="btn-12"></a>

    .gallery{
 background: white;
 width: 100%;
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr) );
 grid-gap: 10px;
 align-items: start;
 justify-items: center;
 margin: auto;
 padding: 40px 40px 40px;}

 img {
 background: lightblue;
 box-shadow: none;
 border-radius: 5px;
 width:15vw;
 height:10vw;
 max-width: 100%;
  }
 .ctrl:active{
 box-shadow: 0em 0em .5em rgba(0,0,0,0.75);
 }
 .ctrl:hover{
 box-shadow: 0em 0em .5em rgba(0,0,0,0.75);
 }
 .ctrl:focus{
 box-shadow: 0em 0em .5em rgba(0,0,0,0.75);
 }
 @media screen and (max-width : 505px ) {
 .grid {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;}
 .cell {
 width: 50%;
 margin: 10px 10px 10px 10px;}}
 @media ( min-width : 505px ) and (max-width : 800px ) {
 .grid {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row; }
 .cell {
 width: calc(100% / 3);
 margin: 10px 10px 10px 10px;
 }
 }
 @media (min-width : 800px ) and ( max-width : 1000px) {
 .grid {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 }
 .cell {
 width: calc(100% / 4);
 margin: 10px 10px 10px 10px;} }

 @media screen and (min-width: 1000px) {
 .grid {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;}
.cell {
 width: calc(100% / 6);
  margin: 10px 10px 10px 10px;}}

Answer 1

是的 flexbox 進行救援，向Nikk Pearce 的 codepen 致敬，然后我根據您的情況對其進行了編輯。 根據需要從此處添加元素之間的間距和樣式。

 * { box-sizing: border-box; }.container { margin: auto; max-width: 1200px; }.responsive-image { max-width: 100%; }.cell img { display: block; } @media screen and (min-width: 600px) {.grid { display: flex; flex-wrap: wrap; flex-direction: row; }.cell { width: 50%; padding: 1em; } } @media screen and (min-width: 1000px) {.cell { width: calc(100% / 4); } }

 <div class="container"> <div class="grid"> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> <div class="cell"> <img src="http://placehold.it/800x800" class="responsive-image"> </div> </div> </div>