I have items dynamically added where each item uses CSS Grid Layout. This is what my Grid Looks like

As you can see the first column in the first grid does not match with the first column s width in the second grid. How do I make them the same?

Code on Codepen

HTML

<div id="app"> <div class="list_item" v-for="item in sortedItems" :key="item.feedItemId"> <div class="news_time">{{getFormattedDate(item.pubdate)}}</div> <div class="news_title">{{item.title}}</div> <div class="news_link"><span class="news_link_text">{{getHostFromUrl(item.link)}}</span></div> <div class="news_stats" :class="isStatShown(item) ? '' : 'hide'"> <div class="likes"><i class="fa fa-thumbs-up"></i><span class="stats_text">{{item.likes || 0}}</span></div> <div class="dislikes"><i class="fa fa-thumbs-down"></i><span class="stats_text">{{item.dislikes || 0}}</span></div> <div class="bullish"><i class="fa fa-arrow-up"></i><span class="stats_text">{{item.bullish || 0}}</span></div> <div class="bearish"><i class="fa fa-arrow-down"></i><span class="stats_text">{{item.bearish || 0}}</span></div> <div class="comments"><i class="fa fa-comment-alt"></i><span class="stats_text">{{item.comments || 0}}</span></div> </div> <div class="news_tags"> <div class="news_tag" v-for="tag in item.tags" :key="item.tag">{{tag}}</div> </div> </div> </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap'); /** There are 2 CSS Grids to acheive this layout? It can be achieved in 1 layout so why 2? Because stats are shown conditionally. Meaning if all are 0 we dont show the whole row! The outer CSS Grid has 3 rows and 4 columns Row 1 time title title and tag Row 2 time link link and tag Row 3 time stats <empty-cell> and tag The row containing stats is set to auto as it collapses when all stats are 0 */ * { padding: 0; margin: 0; box-sizing: border-box; line-height: 1.6; font-family: 'Noto Sans', sans-serif; } .news_time { grid-area: time; } .news_title { grid-area: title; } .news_link { grid-area: link; } .news_stats { grid-area: stats; } .news_tags { grid-area: tags; } .list_item { display: grid; grid-template-areas: "time title title tags" "time link link tags" "time stats . tags"; grid-template-rows: 1fr auto auto; grid-template-columns: auto auto 1fr auto; align-items: center; } .likes { grid-area: likes; } .dislikes { grid-area: dislikes; } .bullish { grid-area: bullish; } .bearish { grid-area: bearish; } .comments { grid-area: comments; } /** This is our second CSS Grid If stats are not available, this whole grid will be hidden. It has only 1 row and 5 columns Row 1 Likes Dislikes Bullish Bearish and Comments It adds a gap to separate the adjacent cells */ .news_stats { display: grid; grid-template-areas: "likes dislikes bullish bearish comments"; grid-rows: 1fr; grid-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 0.75rem; gap: 0.75rem; } /** Spacing */ .list_item { border: 1px solid #eef; } .news_stats { font-size: 0.75rem; opacity: 0.4; margin: 0.3rem 0; } .news_link { font-size: 0.85rem; opacity: 0.6; } .stats_text { display: inline-block; margin-left: 0.3rem; } .news_time { font-size: 0.75rem; margin: 1rem; opacity: 0.75; } .news_tags { margin: 1rem; font-size: 0.75rem; opacity: 0.75; } /** Use this class to hide anything that must not be shown */ .hide { display: none; }

JS