dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
TW Toate comenzile Tailwind CSS

Coloane de tip ziar cu columns- în Tailwind CSS în Tailwind CSS

Layout, Box Model și Poziționare Tailwind CSS 3.0+ Q&A / Distribuie cod

Creează coloane dinamice de tip ziar sau grilă tip Pinterest (Masonry layout) cu break-inside-avoid.

Sintaxă 
columns-1 sm:columns-2 lg:columns-3 gap-6

Ce sunt clasele columns- în Tailwind

Utilizând proprietatea CSS Multi-column (columns), Tailwind vă permite să realizați layout-uri de tip mozaic (Pinterest Masonry) fără JavaScript complicat. Pentru ca elementele să nu fie tăiate la jumătate între coloane, se utilizează utilitarul break-inside-avoid pe fiecare card.

Exemplu Concret: Grilă foto stil Pinterest (Masonry)
<div class="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4">
  <div class="break-inside-avoid bg-white p-4 rounded-xl shadow">Card 1</div>
  <div class="break-inside-avoid bg-white p-4 rounded-xl shadow">Card 2 cu text mai lung...</div>
</div>

Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Coloane de tip ziar cu columns- în Tailwind CSS

Ai o nelămurire despre utilizarea comenzii Coloane de tip ziar cu columns- în Tailwind CSS sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.