Skip to content

Instantly share code, notes, and snippets.

@kevinruscoe
Created August 27, 2017 14:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinruscoe/4fe3fe25d9a2f082736198d2927ee92d to your computer and use it in GitHub Desktop.
Save kevinruscoe/4fe3fe25d9a2f082736198d2927ee92d to your computer and use it in GitHub Desktop.
@supports(display:grid) {
#recipes {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0;
grid-gap: 30px;
margin: 0 30px;
width: auto;
}
.recipeCard {
width: auto;
margin: 0;
}
@media (max-width: 1100px) {
#recipes {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 800px) {
#recipes {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 550px) {
#recipes {
grid-template-columns: 1fr;
}
}
}
.recipeCard img {
object-fit: cover;
width: 100%;
height: 180px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment