Learning CSS Grid the hard way

630 web-design

I’m one of those people that find it easier to learn by trying something out, but the next best thing is a good example led talk or video.

Incidentally Rachel Andrew did a great job of this earlier this year at Render 2017. So if you want to learn CSS grid, go watch that talk and stop reading my blog! 😅

If you are still reading… after I saw Rachel’s talk, I got interested in trying CSS grid myself. So here’s my first take on it.

Putting grid into practice

My first stop was CSS-Tricks’ Complete Guide to Grid which, along with the advice in Rachel’s talk, helped me get the basics, and provided a decent reference for learning the syntax too.

Something did fairly early on, was to make a mixin that gave all my grids the same spacing at different breakpoints, using the grid-gap property.

@mixin space-grid {
	// 🛰 Make a space-grid, applying the space variables.
	display: grid;
	grid-gap: $space-xs;
	@include kp-mq(sm) { grid-gap: $space-sm; }
	@include kp-mq(md) { grid-gap: $space-md; }
	@include kp-mq(lg) { grid-gap: $space-lg; }
}

Note: Above I’m using the amazing breakpoint mixin from Kapow!.

Component layout

I used the grid layout inside a wrap element for most of my homepage components. Layouts are defined by the parent element, so that means it’s easy to make quick changes as it’s all controlled in once place.

Page Layout

Moving onto internal page layouts, I decided to try using grid to control the overall layout.

Mobile

My mobile setup was fairly simple, I just wrote the markup in the order I wanted my elements to appear, then threw the basic grid declaration on my container.

.container {
	@include space-grid;
}

Desktop

I decided to keep it simple and use a breakpoint to shift to my desktop layout.

On my container, I set up my columns and rows. For columns I went with three equal fractions, giving me thirds.

With the rows, I knew I would have two sidebar elements, so I wanted those to be auto, making them the height of their contents. I did the same with the last row too.

For the third row, I wanted the column to take up all of the remaining space, meaning that any columns on this row would also be the same height as the largest thing inside it.

@media (min-width: 700px) {
	.container {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto 1fr auto;
	}
}

I wanted my two sidebar elements to appear on the right of my content, so I set their column to 3 and the row to 1.

Next I set my main content element to the top left grid cell and had it span 2 columns and 3 rows.

Lastly I had my “cta” element at the bottom span all columns with 1 / -1.

@media (min-width: 700px) {
	.element-nav {
		grid-column: 3;
		grid-row: 1;
	}
	.element-side {
		grid-column: 3;
	}
	.element-main {
		grid-column: 1 / span 2;
		grid-row: 1 / span 3;
	}
	.element-cta {
		grid-column: 1 / -1;
	}

See the Pen CSS Grid by nervewax (@Nervewax) on CodePen.

Final thoughts

Before I tried it, I thought that Grid would be the ultimate solution to all the layout problems; maybe this could still be the case, but not without developing some best practices first.

There’s definitely some limitations, grid isn’t good for all cases, but i’m hoping some day soon it’ll replace the numerous frameworks out there and start standardising layout in css.

web-design