Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

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

    John LindquistJohn Lindquist

    Every list needs a bit of styling to help the user know which items are visually important. This lesson walks through using styles isolated to a specific component to improve the look of the list.

    vueVue.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss