Style a List and List Items in Vue.js and Nuxt

We'll add the score, the title back, some details, and some comments. Score can just be the "item.score." The title is just "item.title." The details can be "byItem.byItem.time." Then the comments would be "item.descendants comments," which is just the count of the comments.

With that set up, you can see we're going to need some sort of formatting around this. I'll just toss together a layout for this. Call this "item." Then I can use the "style scoped," so that these styles are only applied to this component, although this component is reused.

Make the item a grid. I just find that grid is the easiest to use when building an initial layout. We'll say that out grid is a repeat, so four rows. Each are 1.5 ems. The columns will have 10 columns that fill up the remaining space. So 10 columns, four rows.

We'll just have to format each of these bits inside the item. We'll start with a score. It can take all of the rows. It'll take up that first left part of it. All of them is just from the first row to the last row. Then grid column, we'll take up one of the cells of the column or span across one or go from one to two. I'm going to write "span one."

You can see our score now takes up all of the rows and just one column spanning across. We'll go ahead and center that, so "align-self-center" and "justify-self-center." Now the score is centered there in the rows and the column it's taking up.

The title will take up the first to the third rows, essentially meaning the top half. The details will take up the third to the last row. The comments can do the same. Everything's smashed together right now, because it's compacted into that one column.

But at least they're on the correct rows. Let's have the columns now. Our title can be in grid column. Start at the second one or the one after, where score ends. Go until the first one from the end or two back from the right side. You see it leaves enough space for an equal spacing of the score that it has over here.

I left that spacing over there. It goes from two over to negative two. Details, let's copy this. We'll have this one show up on the right hand side. Comments, we'll have this be on the left hand side, two to six. Actually, since comments is on the left, let's move that up. You can see can see the comments are taking up the column two to six.

The details are six to negative two or the remaining space. Then add some more alignment stuff, so "justify-self." That means that, when this is bigger, the details will stay stuck to the right. Let's bring the title down. Say "align-self-end." Now, everything meets in the middle.

Maybe they're a little close, so we'll give the item a grid row gap of one em. Those look pretty nice. Let's see what it looks like without the debugging on. I'll comment the debug out. That looks fine to me.