时间戳

首页 > 解决方案 > 如何管理 css 媒体查询网格列

html - 如何管理 css 媒体查询网格列

问题描述

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

标签： htmlcss

解决方案

是的 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>

推荐阅读