How to manage css media query grid columns

Question

I have 12 gallery thumbnails. How do I specify 4 media queries allowing only 6, 4, 3, or 2 columns while maintaining proportionate image scaling and equal margins at 10px between each thumbnail without causing the media query column rule to break? for example at min-width: 1000px it currently displays 5 columns instead of 6

    .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;}}

Nathaniel Flick · Accepted Answer

Yep flexbox to the rescue, hat tip to Nikk Pearce's codepen, which I then edited to fit your situation. Add spacing between elements and styling as needed from here.

* {
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);
  }
}

How to manage css media query grid columns

Answers (1)

Related Questions