css-for-grid.css

/* 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;
}