Tailwind basic columns

មេរៀននេះយើងសិក្សាអំពី columns នៅក្នុង tailwindCSS។ coloms គឺជាការដាក់ជួរឈរ ដូចឧទាហរណ៍ខាងក្រោមនេះ

coloms-4

<div class="columns-4">
    <img class="w-full" src="kep.jpg" alt="">
    <img class="w-full" src="kep1.jpeg" alt="">
    <img class="w-full" src="kep3.jpeg" alt="">
    <img class="w-full" src="kep4.webp" alt="">
</div>

columns-2

<div class="columns-2">
    <img class="w-full" src="kep.jpg" alt="">
    <img class="w-full" src="kep1.jpeg" alt="">
    <img class="w-full" src="kep3.jpeg" alt="">
    <img class="w-full" src="kep4.webp" alt="">
</div>

columns-2 ជាមួយ gap-1

gap គឺការកំណត់ចន្លោះរវាងរូបមូយទៅរូបភាពមួយទៀត

<div class="columns-2 gap-1">
    <img class="w-full" src="kep.jpg" alt="">
    <img class="w-full" src="kep1.jpeg" alt="">
    <img class="w-full" src="kep3.jpeg" alt="">
    <img class="w-full" src="kep4.webp" alt="">
</div>

columns-3 ជាមួយ gap-1

<div class="columns-3 gap-0">
    <img class="w-full" src="kep.jpg" alt="">
    <img class="w-full" src="kep1.jpeg" alt="">
    <img class="w-full" src="kep3.jpeg" alt="">
    <img class="w-full" src="kep4.webp" alt="">
</div>