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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *