Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello, i have this kind of code
<template>
<ValidationForm>
<div
v-for="(email, index) in emails"
:key="email"
class="flex"
>
<div class="grid grid-cols-2">
<div class="flex bg-[#6C757D] mr-3 text-sm text-white rounded-md p-1">
<p>{{ email }}</p>
<span class="ml-1.5 cursor-pointer" @click="removeTag(index)">x</span>
</div>
</div>
</div>
<div
class="my-2 flex items-center border-gray-600 border-2 rounded-md justify-between px-4"
>
<Field v-slot="{ resetField, field }" name="genres">
<input
class=" outline-0 w-full m-1.5 placeholder-white"
v-bind="field"
@keydown.enter="resetField()"
@keydown="addTag"
@keydown.delete="removeLastTag"
@paste="pasteTags"
v-model="this.inputValue"
/>
</Field>
</div>
<p class="text-gray-400 text-[10px]">
Be careful !
</p>
<p class="text-red-500">{{ error }}</p>
{{this.inputValue}}
</ValidationForm>
</template>
So, right now i have Tags on the upper side, but they are adding in column type, so, i want them to be like in kinda of Grid, i want them to be always in the center of div, and if there is enough space for them without breaking DIV or space of this div, to be placed maximum of tags. If on line 1 in browser there is enough space for 4 of them (tags) i want them to be 4 on first line and be in center, then all of next tags to be the same, if there is place for only 2 tags, to be 2 tags on the next line and to be in the center and etc. I think i need grid for this. How can i do this? (in Tailwind due to my code).
<div class="grid grid-cols-2 md:grid-cols-4 place-content-center"> // in mobile screen size grid 2 col and medium screen size grid 4 column, try 'place-items-center' if place-content-center doesn't work
<div v-for="(email, index) in emails" :key="index">
<div class="flex bg-[#6C757D] mr-3 text-sm text-white rounded-md p-1">
<p>{{ email }}</p>
<span class="ml-1.5 cursor-pointer" @click="removeTag(index)">x</span>
</div>
</div>
</div>
@AungHtetPaing__ Thank you, this is almost what i need, i use place-items as you mention, but there is one problem, the tags is too close to each other (i add gaps to avoid this, for x 4 and for y 2 or 3), this is helped a lil bit, but since tags are growing and growing, some of them , maybe 1-2 are too close on X axis to each other, what can i do about this?
@AungHtetPaing__ https://prnt.sc/A4-VgfOX0B0H screen (there is not enough space for it, but it still tries to be in the line)
@luarsab for my case I use flex that is not equal column but I am ok with that
<div class="-ml-1 flex flex-nowrap lg:flex-wrap items-baseline overflow-x-auto pb-3 pt-1 lg:space-y-2">
<div
@click="categoryFilter = null"
class="capitalize cursor-pointer bg-white border inline-block px-4 py-1 rounded-2xl shadow text-sm mx-1"
:class="!categoryFilter ? 'border-blue-400 text-blue-500': 'text-gray-600'"
>
all
</div>
<div
v-for="category in categories"
:key="category.slug"
@click="categoryFilter = category.slug"
class="capitalize cursor-pointer bg-white border inline-block px-4 py-1 rounded-2xl shadow text-sm mx-1"
:class="categoryFilter === category.slug ? 'border-blue-400 text-blue-500': 'text-gray-600'"
>
{{ category.name }}
</div>
</div>
or try to wrap the tag text as needed by giving max width? I am not sure 'p' tag wrap automatically or not.
<div class="flex bg-[#6C757D] mr-3 text-sm text-white rounded-md p-1 max-w-[50px]"> // max-w-[50px] is arbitrary value
<p>{{ email }}</p>
<span class="ml-1.5 cursor-pointer" @click="removeTag(index)">x</span>
</div>
@AungHtetPaing__ Thank you. I just add max-w-[7rem] and truncate, and on hover im making max-w-full if user will want to see full email of exact one
Please or to participate in this conversation.