finxol.io
Personal blog
finxol.io
blog
feat: introduce grid-lanes to posts list when supported
+16
-1
+16
-1
app/components/page-elements/PostsList.vue
+16
-1
app/components/page-elements/PostsList.vue
···
70
70
:post="filteredPosts[0]"
71
71
/>
72
72
73
-
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4 mb-8">
73
+
<div class="posts gap-4 mt-4 mb-8">
74
74
<PostPreview
75
75
v-for="post in filteredPosts?.slice(1)"
76
76
:key="post.path"
···
78
78
/>
79
79
</div>
80
80
</template>
81
+
82
+
<style scoped>
83
+
.posts {
84
+
--number-cols: 1;
85
+
86
+
display: grid;
87
+
display: grid-lanes;
88
+
grid-template-columns: repeat(var(--number-cols), minmax(0, 1fr));
89
+
gap: 1lh;
90
+
91
+
@media (min-width: 1024px) {
92
+
--number-cols: 2;
93
+
}
94
+
}
95
+
</style>