css CSS：响应式图像网格

Posted 2021-05-13

a.image-grid {
  float: left;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  text-decoration: none;
}

img.image-grid { 
  max-width: 100%; 
  display: block;
}


/*==========  DESKTOP MEDIA QUERY  ==========*/

/* Two Column */
@media only screen and (min-width: 980px) {
    a.image-grid {
    width: 31%;
    margin: 0 2% 20px 0;
  }
}
  
/* Three Column */
/*==========  TABLET MEDIA QUERY  ==========*/
@media only screen and (min-width: 569px) and (max-width: 979px ) {
    a.image-grid {
    width: 47%;
    margin: 0 3% 25px 0;
  }
}

/* Four Column */

@media screen and (min-width:1200px) {
	.title, .category, a, a:link, a:visited, a:hover, a:active {
		width: 23%;
		margin: 20px 2% 0 0;
	}
}