@@Ghost_Egocentricopara que disminuya un poco el tamaño de la imagen cuando pases el cursor por encima del img y transition para que demore la acción unos segundos. Si es scale(1) es su tamaño normal y si pones scale(1.1) va aumentando cuando pases el cursor, así sucesivamente
Gracias a tus videos, mis proyectos van quedando mejor optimizados y mas profesionales, muchisimas gracias. Aprendo mucho con vos, me motiva a seguir aprendiendo y a ayudar a mis compañeros en lo que puedo. Siempre tratando de seguir tu filosofia de compartir el conocimiento y enseñar todo lo que se pueda. Nuevamente muchas gracias por tu aporte a la comunidad. Se te quiere mucho
tarde pero bueno, puedes ajustar conforme a tus requerimientos, serían estas tres clases de tw grid gap-3 grid-cols-[repeat(auto-fill,minmax(400px,1fr))]
A mi me sirvió creando en vez de las imagenes dentro del div, poniendo divs que contenían texto e imagenes, y el texto se alinea junto con la imagen. También, usando el tag img puedes poner gifs y usando el tag video puedes poner videos, asi que creo que como tal funciona para todo jeje
Lo explicaste para el orto, cómo odio a las personas que no explican con coherencia y razón, yo te voy a explicar porque este parásito 🪱 no sirve para nada. Si tienes un contenedor grande con imágenes y luego agregas un nuevo div con más imágenes dentro, el selector div > img no afectará a las imágenes dentro de ese nuevo div.
@@maxidevs es que centrar la ultima columna no tiene mucho sentido, el display grid sirve justamente para centrar y ubicar en 2 dimensiones: arriba abajo e izquierda derecha, si "centras" el ultimo elemento suelto, no esta respetando las columnas, seria mover las columnas y eso rompe la grilla, que es como una cuadricula de un excel que todas miden igual y tiene filas/columnas, se entiende?
Explicas como un computin a otro computin.. o sea a una persona comun esto es chino mandarin... algo te entiendo pero lo que necesito es para las paginas web por el celular y dentro de una app que tiene su propio navegador para bajar videos.. quiero achicar o agrandar las vistas de los videos que me muestra alguna pag web, no se como se expresa pero las cuadriculas no funcionan, solo me muestra las visualizaciones de los videos en una sola columna hacia abaji, pero quiero que muestras..!!! por ejemplo esto mismo 3 columnas o mas... no se como se hace lo que explicas... responsiv que es...???? Y nombras html.. esa palabra siempre la he visto.. lo tengo asociado a tener una vista mas basica de alguna pagina..
.Ancho 100%? habrá que darle la misma altura y anchura para que todas sean iguales .Metemos las imágenes que quieras, has sacado un montón de código que no has explicado Cómo se meten todas las imágenes que quieras?
Siempre vengo a este video a recordar como eran las propiedades jaja así que aquí está el css: { display: grid; grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) ); gap:10px; }
recomiendo poner dentro de "div > img" esto: transition: .3s;
y en el css esto:
img:hover{
transform: scale(0.9);
}
por que o que explique broo
@@Ghost_Egocentrico no lo he probado ,pero creo que es para hacer que al poner el ratón encima de la imagen se haga más grande
@@Ghost_Egocentricopara que disminuya un poco el tamaño de la imagen cuando pases el cursor por encima del img y transition para que demore la acción unos segundos. Si es scale(1) es su tamaño normal y si pones scale(1.1) va aumentando cuando pases el cursor, así sucesivamente
😅
Despacio, franchute, esto es oro.
Gracias a tus videos, mis proyectos van quedando mejor optimizados y mas profesionales, muchisimas gracias. Aprendo mucho con vos, me motiva a seguir aprendiendo y a ayudar a mis compañeros en lo que puedo. Siempre tratando de seguir tu filosofia de compartir el conocimiento y enseñar todo lo que se pueda. Nuevamente muchas gracias por tu aporte a la comunidad. Se te quiere mucho
ya chambeas mi king?
Esta tan ocupado chambeando que no tiene tiempo a responder
@@JuanAntonioPazCastillo
Muchas gracias, Me encantan estos trucos de css 💋
Gracias mi loco, simple, facil y sin tanta vuelta
me sirvió un montón, gracias Midu
Dios mío Justo lo que necesitaba 😢 te amo ❤
explicas muy bien 1 seguidor mas que aprendera nuevas tecnicas
Joya. Yo lo refactorice ese codigo con uso de clases css
justo lo estoy viendo para el trabajo
Que buena explicación 👍
Muy bueno! Grande midu!
hola midudev, es mejor tener un container para cada uno de las imagenes o solo las imagenes y el container grid
Buenas tienes algun tutorial enfocado a mysql pero atraves del que trae integrado hosting ?
Eres un crack
contenido de mucho valor siempre
muy bueno midu, como seria usando tailwind
a
tarde pero bueno, puedes ajustar conforme a tus requerimientos, serían estas tres clases de tw
grid gap-3 grid-cols-[repeat(auto-fill,minmax(400px,1fr))]
Que significa estilar las imagenes?
Como funciona esto: "div>img"
Y si quiero que haya minimo dos columnas?
Gente, pregunta seria, usáis ligaduras en vuestro editor? No se si se llama ligaduras en vscode, pero que el => sea flecha y demás
Yo las uso y me ayudan demasiado, sobre todo utilizando la fuente JetBrains Mono
Como se puede añadir una foto despues de hacer el gridd?
Solo aplca para imagenes?' o tambien cuando hay texto???
A mi me sirvió creando en vez de las imagenes dentro del div, poniendo divs que contenían texto e imagenes, y el texto se alinea junto con la imagen. También, usando el tag img puedes poner gifs y usando el tag video puedes poner videos, asi que creo que como tal funciona para todo jeje
Esto si es practicar , solo el html? Lo vemos en la web o en un editor donde se vea el resultado!?
Esta genial, pero si solo hay elemento la card será el 100% y queda raro, no?
Pones auto-fill embes de auto-fit para que mantenga el tamaño
no entendi, esto es para html? 🥺
Eres buenísimo! Tienes curso de css?
X2
Tengo una pregunta, por que en el css en vez de poner nada más div img pones div > img? Para que sirve el signo ">"?
Para indicar que se aplique a los elementos que estén dentro de la etiqueta div y sean img
Lo explicaste para el orto, cómo odio a las personas que no explican con coherencia y razón, yo te voy a explicar porque este parásito 🪱 no sirve para nada. Si tienes un contenedor grande con imágenes y luego agregas un nuevo div con más imágenes dentro, el selector div > img no afectará a las imágenes dentro de ese nuevo div.
Me encanto
A este se le nota lo senior
Cómo hago si quiero que el último esté centrado?
al contenedor display: flex, flex wrap: wrap y justify content center
@@tomxdiaz entonces de nada me sirve ver este trucazo de display gris bro. La idea es escalar este mismo ejemplo.
@@maxidevs es que centrar la ultima columna no tiene mucho sentido, el display grid sirve justamente para centrar y ubicar en 2 dimensiones: arriba abajo e izquierda derecha, si "centras" el ultimo elemento suelto, no esta respetando las columnas, seria mover las columnas y eso rompe la grilla, que es como una cuadricula de un excel que todas miden igual y tiene filas/columnas, se entiende?
*_Creí que ibas a usar flex wrap_*
Pues no 😃
como separar mas imagen de la otra?
Modifica el gap
Esto esta genial, pero yo aprendi el responsive con media queries, esta obsoleto el mq?
No, pero es recomendable no abusar de las medias.
Crack!
Con Flex box
No me gusta esa sombra. Mejor una de 150px y que sea naranja.
Sí, jajajaja
Jajaja estos comentarios son la leche
Explicas como un computin a otro computin.. o sea a una persona comun esto es chino mandarin... algo te entiendo pero lo que necesito es para las paginas web por el celular y dentro de una app que tiene su propio navegador para bajar videos.. quiero achicar o agrandar las vistas de los videos que me muestra alguna pag web, no se como se expresa pero las cuadriculas no funcionan, solo me muestra las visualizaciones de los videos en una sola columna hacia abaji, pero quiero que muestras..!!! por ejemplo esto mismo 3 columnas o mas... no se como se hace lo que explicas... responsiv que es...???? Y nombras html.. esa palabra siempre la he visto.. lo tengo asociado a tener una vista mas basica de alguna pagina..
❤love u
pense que en este ejemplo se usaría flexbox! Jaja
Depende de lo que quieras.
Si quieres especificar un número en concreto de columnas, es mejor usar Grid.
Si te da igual, puedes usar Flexbox xd
Crack
Yo creia que iba a hacer algo novedosoo esto es algo basico que aprendes cuando inicias con CSS GRID.
.Ancho 100%? habrá que darle la misma altura y anchura para que todas sean iguales
.Metemos las imágenes que quieras, has sacado un montón de código que no has explicado Cómo se meten todas las imágenes que quieras?
La palabra mas usada de midu es estilar , estilar estilar
Siempre vengo a este video a recordar como eran las propiedades jaja así que aquí está el css:
{
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(150px, 1fr)
);
gap:10px;
}
tkm midu
The big boss 🤣🤣🤣
cine🚬
Que no eran tres lineas de CSS? XD
No sé si sabes contar pero para hacer el responsive son 3 líneas literales. Hago saltos de línea para que quepa verticalmente.