(S)CSS Grid Practice and fine-tuning

index.pug

header
	h1 (S)CSS Grid
	h2 Practice and fine-tuning

main#demo
	section#grid-demo-section
		ul.grid
			- for (var x = 0; x < 12; x++)
				li
					img(src="http://placehold.it/360", alt="img")

s-css-grid-practice-and-fine-tuning.markdown

(S)CSS Grid Practice and fine-tuning

A Pen by Matthew Daniel Brown on CodePen.

License.

style.scss

//
// FOR DEMO ONLY
//
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");
html {
	box-sizing: border-box;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}
body > header {
	padding: 2rem 0 6rem 0;
	text-align: center;
	font-size: small;
	color: rgba(black, 0.35);
	width: 100%;
	margin: 0;
	background: mediumslateblue;
	h1,
	h2,
	h3 {
		font-weight: 700 !important;
		letter-spacing: 2px;
		// font-family: 'SF Mono', 'Menlo', Menlo, monospace;
		font-family: Inconsolata, monospace;
	}
	h2 {
		font-weight: 300 !important;
	}
}
html, body { min-width: 240px !important }
body>header, main, body>footer { min-width: 320px !important; }
main { 
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	max-width: 768px;
	@media screen and (min-width: 900px) {
		max-width: initial !important;
	}
	@media screen and (min-width: 1196px) {
		
	}
	@media screen and (min-width: 1200px) {
		
	}
}
//----------------------------
// 	THE GRID
//----------------------------
.grid {
	position: relative;		/// FOR DEMO ONLY
	top: -4rem;										/// FOR DEMO ONLY
	margin: 0;
	padding: 0;
	list-style: none !important;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-row-gap: 4rem;
	
	li {
		list-style: none !important;
		display: inline-block;
		img {
			display: block;
			width: 100%;
			max-width: 360px;
			margin: auto;
			box-sizing: border-box !important;
			border-radius: 4px;
			box-shadow: 0 8px 16px -4px rgba(black, 0.5);
		}
	}
	
	@media screen and (min-width: 480px) {
		grid-template-columns: auto auto;
		grid-template-rows: auto;
		grid-column-gap: 1.5rem;
		grid-row-gap: 1.5rem;
		img {
			display: block;
			width: 100%;
			max-width: 300px;
			margin: auto;
			box-sizing: border-box !important;
		}
	}
	@media screen and (min-width: 640px) {
		grid-template-columns: auto auto auto;
		grid-template-rows: auto;
		grid-column-gap: 2rem;
		grid-row-gap: 2rem;
		img {
			display: block;
			width: 100%;
			max-width: 480px;
			margin: auto;
			box-sizing: border-box !important;
		}
	}
	@media screen and (min-width: 960px) {
		grid-template-columns: auto auto auto auto;
		grid-template-rows: auto;
		grid-column-gap: 2.5rem;
		grid-row-gap: 2.5rem;
		img {
			display: block;
			width: 100%;
			max-width: 640px !important;
			margin: auto;
			box-sizing: border-box !important;
		}
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.5.0/modern-normalize.min.css" rel="stylesheet" />