Learning CSS Grid

Late Monday night, Nov 15, 2021, I came across CSS-Tricks’ article Look Ma, No Media Queries! Responsive Layouts Using CSS Grid. This would be perfect for building a particular section of Tom Gordon‘s new music recording studio website.

The goal: a 3 column x 2 row layout on desktop that changes shape as the screen gets smaller (desktop > tablet > phone).

• Desktop view: 1st row is equally divided into 3 columns, with 2nd row content spanning all 3 columns.
• Tablet view: 1st row is equally divided into 2 columns, with 2nd row content spanning all 2 columns.
• Phone view: all content is stacked in one column.

The fact that CSS Grid means I can go from desktop to tablet to phone – with NO media queries – is fucking amazing!

CSS Grid resources:

• Look Ma, No Media Queries! Responsive Layouts Using CSS Grid – CSS-Tricks
• A Complete Guide to Grid – CSS Tricks
• Responsive Mondrian – a demo of CSS Grid – Jen Simmons
• Layout Land – Jen Simmons
• Jen Simmons on Twitter
• Things I’ve Learned About CSS Grid Layout – CSS Tricks
• Learning CSS Grid – Jon Suh
• CSS Grid: A guide to getting started – Logrocket, Dennis Gaebel
• A Deep Dive Into CSS Grid minmax() – Ahmad Shadeed
• Fill grid cell with a color – Free Code Camp

The below CSS Grid CSS is just for my own reference:

.gridcontainer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Three columns that fill 3 cols on desktop and collapse to 1 col on mobile */
	grid-template-rows: auto; /* Saw this in https://css-tricks.com/things-ive-learned-css-grid-layout/ */
	grid-gap: 1rem;	
	padding: 0;
}
	
.gridcontainer > #album-notes { /* #album-notes spans all three 1fr items on desktop using grid-column-start and grid-column-end. Then 3 items in above minmax properly collapse to two 1fr on tablet and to one 1fr on mobile. https://css-tricks.com/things-ive-learned-css-grid-layout/ */
	grid-column-start: 1;
	grid-column-end: -1;
	}
	
.gridcontainer > .item { /* This is just so I can see what's going on on the front-end. Delete this when ready to go live. */
	border: 1px solid red;
	border-radius: .5rem;
}