Diseño Web Responsive con 3 líneas de CSS y sin usar Media Queries
ฝัง
- เผยแพร่เมื่อ 13 มิ.ย. 2023
- ¡Aprende a crear un diseño responsive con CSS y sin usar Media Queries!
Y todo gracias a la potencia de CSS Grid.
La clave está en la propiedad `grid-template-columns`, que se utiliza para especificar las columnas dentro de la cuadrícula.
Luego con la función `repeat()`, le indicamos cómo se van a repetir las columnas.
El primer argumento es el número de veces que se debe repetir el patrón.
Con `auto-fit` le decimos que se deben ajustar automáticamente el número de columnas para que encajen en el contenedor de la rejilla.
Esto significa que se creará el número máximo de columnas posibles dentro del contenedor, según el tamaño de los elementos contenidos en ellas.
De segundo parámetro es el patrón que se debe repetir.
La función minmax() se utiliza para establecer un rango de tamaño para las columnas.
Le decimos que el tamaño mínimo es de 150px y el máximo es de 1fr.
Finalmente usamos `gap` para separar los elementos.
¡En mi ejemplo he usado imágenes pero podrías usar cualquier otro elemento dentro!
Si te ha gustado el tutorial, deja tu ❤️ y compártelo con tus amigos. - วิทยาศาสตร์และเทคโนโลยี
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
Gracias mi loco, simple, facil y sin tanta vuelta
Dios mío Justo lo que necesitaba 😢 te amo ❤
Que buena explicación 👍
justo lo estoy viendo para el trabajo
explicas muy bien 1 seguidor mas que aprendera nuevas tecnicas
Muy bueno! Grande midu!
Eres un crack
muy bueno midu, como seria usando tailwind
a
Esta genial, pero si solo hay elemento la card será el 100% y queda raro, no?
Me encanto
hola midudev, es mejor tener un container para cada uno de las imagenes o solo las imagenes y el container grid
Crack!
Que significa estilar las imagenes?
Como funciona esto: "div>img"
contenido de mucho valor siempre
A este se le nota lo senior
Como se puede añadir una foto despues de hacer el gridd?
Esto si es practicar , solo el html? Lo vemos en la web o en un editor donde se vea el resultado!?
Crack
Y si quiero que haya minimo dos columnas?
Con Flex box
❤love u
*_Creí que ibas a usar flex wrap_*
Pues no 😃
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
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.
Eres buenísimo! Tienes curso de css?
X2
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
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
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
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.
No me gusta esa sombra. Mejor una de 150px y que sea naranja.
Sí, jajajaja
Jajaja estos comentarios son la leche
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?
The big boss 🤣🤣🤣
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?
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.