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