Skip to main content
CSS is fun and cool and I like it.
Link

CSS Grid Layout Module Level 2

Article

Counting With CSS Counters and CSS Grid

In this post, we're going to demonstrate how we can use the source order independence of CSS Grid to solve a layout issue that's the result of a source order constraint. Specifically, we're going to look at checkboxes and CSS Counters—two concepts that rely on source order when used together.

Link

New flexbox guides on MDN

Article

Fun Times With Sizing Grid Elements

Chris showed us a little while back that CSS grid areas and their elements are not necessarily the same size. It’s an interesting point because one might assume that putting things into a grid area would make those things occupy the entire space, but grid areas actually reserve the space defined by the grid and set the element’s justify-content and align-items properties to a stretch value by default.

So… yes, they are the same size, but not necessarily.

Chris ended … Read article “Fun Times With Sizing Grid Elements”

Article

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`

One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a Grid, and then auto-place items in them. More specifically, our ability to specify how many columns we want in the grid and then letting the browser handle the responsiveness of those columns for us, showing fewer columns on smaller viewport sizes, and more columns as the screen estate allows for more, without needing … Read article “Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`”

Article

Five Design Fears to Vanquish With CSS Grid

CSS grid, along with a handful of other new CSS properties, are revolutionizing web design. Unfortunately, the industry hasn’t embraced that revolution yet and a lot of it is centered around fear that we can trace back to problems with the current state of CSS grid tutorials.

The majority of them fall into one of two categories:

  1. Re-creating classic web design patterns. Grid is great at replicating classic web design patterns like card grids and “holy grail” pages.
Read article “Five Design Fears to Vanquish With CSS Grid”
Link

Calendar with CSS Grid

Snippet

CSS Grid Starter Layouts

This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects.… Read article “CSS Grid Starter Layouts”

Article

Aspect Ratios for Grid Items

We’ve covered Aspect Ratio Boxes before. It involves trickery with padding such that an element’s width and height are in proportion to your liking. It’s not an ultra-common need, since fixing an element’s height is asking for trouble, but it comes up.

One way to lower the risk is The Psuedo Element Tactic, in which a pseudo element pushes its parent element to the aspect ratio, but if the content inside pushes it taller, it will get taller, aspect … Read article “Aspect Ratios for Grid Items”