0
209
Views¿Cómo representar el elemento horizontalmente (Diseño de mampostería)?
Me gustaría representar los elementos horizontalmente mientras se carga la página, consulte las siguientes imágenes
<section tabindex="-1" class="relative mx-8 mt-10 mb-20 max-w-7xl focus:outline-none sm:mx-16 md:mx-20 lg:mx-24 xl:mx-auto" > <ul class="h-full w-full list-none columns-1 gap-4 space-y-12 overflow-hidden pb-32 md:columns-2 lg:columns-3 lg:gap-8 xl:columns-4" > <ExploreCard v-for="(post, index) in posts.data" :key="index" :post="post" :canLike="this.canLike" /> </ul> </section> Currently
Expected
Algo como esto,
https://reactjsexample.com/rendering-columns-from-a-list-of-child-with-horizontal-ordering/
Estoy buscando una solución Js, Vue o CSS.
3 answers
Answer question0
Le aconsejo que use la utilidad de grid de clase de viento de cola para crear un contenedor de cuadrícula: https://tailwindcss.com/docs/display#:~:text=Use%20grid%20to%20create%20a%20grid%20container .
0
¡Termino con una solución de paquete y funciona perfectamente bien!
DaPotatoMan/vue-next-mampostería
y así es como se ve
<masonry :cols="{ default: 4, 1024: 3, 768: 2, 640: 1 }" :gutter="{ default: 40, 1024: 30, 768: 20 }" > <div v-for="(post, index) in posts.data" :key="index" class="mb-10"> <ExploreCard v-for="(post, index) in posts.data" :key="index" :post="post" :canLike="this.canLike" /> </div> </masonry>¡De esta manera, toda la publicación se representa en orden horizontal!
0
Esta es una respuesta con CSS puro de @haltersweb
https://stackoverflow.com/a/37063940/17737657
Diseño de mampostería solo con CSS
pantalla: bloque en línea
ul { margin-left: .25em; padding-left: 0; list-style: none; } li { margin-left: 0; padding-left: 0; display: inline-block; width: 30%; vertical-align: top; } <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> </ul> 
pantalla: flexionar
ul { margin-left: .25em; padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; } li { margin-left: 0; padding-left: 0; width: 33.3%; } <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> </ul> 