Last active
July 31, 2018 00:01
-
-
Save bonjmartn/8897d699627ebf1e27429d2c64c192a2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* THIS IS THE CLASS THAT IS APPLIED TO THE UNORDERED LIST AND ACTS AS THE FLEX CONTAINER */ | |
.grid-wrap { | |
display: flex; /* THIS MAKES IT A FLEX CONTAINER */ | |
flex-flow: row wrap; /* THIS MAKES EACH BLOG POST LINE UP HORIZONTALLY AND WRAP TO THE NEXT LINE */ | |
align-items: center; /* YOU CAN CHOOSE DIFFERENT VALUES HERE */ | |
justify-content: center; /* YOU CAN CHOOSE DIFFERENT VALUES HERE */ | |
list-style: none; /* THIS REMOVES THE BULLET POINT FOR EACH LIST ITEM */ | |
} | |
/* THIS IS THE CLASS FOR EACH LIST ITEM */ | |
.grid-item { | |
flex-basis: 400px; /* WIDTH OF EACH ITEM - ADJUST FOR YOUR OWN PURPOSES */ | |
height: 500px; /* HEIGHT OF EACH ITEM - ADJUST FOR YOUR OWN PURPOSES */ | |
padding: 10px; /* SET WHATEVER PADDING VALUE YOU WANT */ | |
margin: 10px; /* SET WHATEVER MARGIN VALUE YOU WANT */ | |
} | |
/* USE THIS TO MAKE THE FEATURED IMAGES BEHAVE PROPERLY ACROSS ALL DEVICES */ | |
.grid-item img { | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
max-width: 400px; /* SET WHATEVER SIZE VALUE YOU WANT */ | |
} | |
/* YOU MIGHT NEED THIS TO FIX THE TYPICAL INDENTION BEHAVIOR OF UNORDERED LISTS */ | |
.grid-wrap ul { | |
margin-left: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment