Aral Balkan

Mastodon icon RSS feed icon P2P network icon

Giddy about CSS grid

The list of posts in the index of this blog are grouped by year, month, and day. Within the days, multiple posts are grouped by hour.

The initial index page during the one-hour hack on Friday that resulted in this site simply listed the post titles (do the Simplest Thing That Could Possibly Work (STTCPW)).

The site as it was on Friday at the end of its first hour of life

Version 1: two days ago.

Yesterday, I refined the site and implemented the chronological grouping. However, again going with STTCPW, I used a monospace script font to fake three-column layout of the list items:

Yesterday’s implementation of the index faked columns in the list.

Yesterday’s site: fake it till you make it!

As you can see, the date and day name are being repeated for every entry in a day. Less than ideal. Removing the redundancy in the red date stamp was easy. I simply tweaked the template code to improve the grouping so it was only displayed once and then floated it left. Hiding the redundant day names was a bit more convoluted: I added class names using a counter to the day name spans and used the following CSS rule to hide all but the first:

.day:not(.item-0) { color: white; }

The remaining problem was that since I was faking columns, if the title of a post was too wide (or if you were viewing the site on a narrow viewport), the title would wrap to the start of the list instead of staying within its “column”.

CSS grids to the rescue!

Laura waxes lyrical about CSS grids every chance she gets so I thought I’d give them a shot. How difficult could they be? (A question one learns early on never to ask when the topic is CSS.)

Needless to say, judging my the title of this post, I was pleasantly surprised.

A quick glance at the Defining a Grid example on Rachel Andrew’s excellent Grid by Example site gave me all I needed to go on.

I quickly spiked it with a simple three column, two row grid using an unordered list, saw that it worked as intended, and implemented it on the actual site. Here’s the source of the spike:

<style>
ul { list-style-type: none; }
li {
  display: grid;
  grid-template-columns: 100px 100px 1fr;
  grid-gap: 10px;
  margin-top: 10px;
}
.first { background-color: lightblue; }
.second { background-color: lightcoral; }
.third { background-color: khaki; }
</style>

<ul>
  <li>
    <span class='first'>Hello</span>
    <span class='second'>there</span>
    <span class='third'>how are you doing?</span>
  </li>
  <li>
    <span class='first'>And</span>
    <span class='second'>another</span>
    <span class='third'>row.</span>
  </li>
</ul>

Pop that into an index.html file, run http-server (http-server -c-1) and you’ll see:

CSS Grid spike showing a three-column, two-row layout with fixed width columns for the first two columsn and a flexible width for the third that takes up the rest of the space. The background colours of the columns are light blue, light coral, and khaki.

A quick and dirty grid

(Notice the HTML isn’t even valid. That’s OK. It’s a spike. Think of it as a back-of-the-napkin sketch. It’s meant to be pragmatic.)

So, with that, two days after its birth, the site is beginning to shape up with an index that has a proper four-column layout with a neat and logical chronological grouping.