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

Accordion Rows in CSS Grid

Article

Equal Width Columns in CSS Grid are Kinda Weird

Everything is flexible these days. If you write grid-template-columns: 200px 200px 200px;, sure, you’d have equal-width columns, but that’s a rare day. What you usually mean is three columns of equal fluid width.

We’ve got fractional units for that, like grid-template-columns: 1fr 1fr fr;. That’s usually fine, but they aren’t very sturdy like pixels. A large bit of media (or something like a <pre>, or long bit of text like a URL) can cause those columns … Read article “Equal Width Columns in CSS Grid are Kinda Weird”

Article

4 CSS Grid Properties (and One Value) for Most of Your Layout Needs

CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet most of your layout needs.… Read article “4 CSS Grid Properties (and One Value) for Most of Your Layout Needs”

Article

Responsive Grid Magazine Layout in Just 20 Lines of CSS

I was recently working on a modern take of the blogroll. The idea was to offer readers a selection of latest posts from those blogs in a magazine-style layout, instead of just popping a list of our favorite blogs in the sidebar.

The easy part was grabbing a list of posts with excerpts from our favorite RSS feeds. For that, we used a WordPress plugin, Feedzy lite, which can aggregate multiple feeds into a single time-ordered list — perfect … Read article “Responsive Grid Magazine Layout in Just 20 Lines of CSS”

Almanac

grid-template-columns / grid-template-rows

The grid-template-rows and grid-template-columns properties are the primary CSS properties for establishing a grid layout, once the element is a grid context (display: grid;).

There are also -ms-grid-columns and -ms-grid-rows, which are the old IE version of this. You may want to consider Autoprefixing to get them, or not, your call. There was also a weird period where they were grid-definition-columns and grid-definition-rows, but that’s not a thing anymore.

Here’s an example derived from Microsoft’s Read article “grid-template-columns / grid-template-rows”