Maquetación de Grillas y Estilos CSS en Proyectos Web
Contenido del curso
Propiedades de Grid
Power ups de Grid
Proyecto
Bonus
Próximos pasos
Maquetación de Grillas y Estilos CSS en Proyectos Web
Maquetación de Grillas y Estilos CSS en Proyectos Web
Contenido del curso
la profesora juega legue of legends con warwick???????????????????????''
"Estudien vagos" Una pala empeñada
jjajajja Siii :v
Consejo: Agregar a los estilos del button:
cursor: pointer;
Buen dato. Gracias.
o puedes tambiér contener el button en un anchor, que es más práctico ya que casi siempre estos botones te llevan a algún enlace para lo cual es conveniente el <a> conteniendo al <button>
Se ve Genial
Hermosoooooo!!!!!!
para no hacer calculos se puede usar el grid template areas y decirle como se van a repartir las grillas, dejo ejemplo
<section class="dishes"> <h3>Our Services</h3> <div class="dishes-grid"> <img class="dishes-item dishes-item__big" src="images/video.png" alt=""> <img class="dishes-item dish-1" src="images/dish1.png" alt=""> <img class="dishes-item dish-2" src="images/dish2.png" alt=""> <img class="dishes-item dish-3" src="images/dish3.png" alt=""> <img class="dishes-item dish-4" src="images/dish4.png" alt=""> </div> </section>
--- CSS ---
.dishes-grid{ display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; grid-template-areas: "big big img1 img2" "big big img3 img4" ; gap: 26px; } .dishes-item__big{ grid-area: big; } .dish-1{ grid-area: img1; } .dish-2{ grid-area: img2; } .dish-3{ grid-area: img3; } .dish-4{ grid-area: img4; } .dishes-item{ width: 100%; height: 100%; object-fit: cover; }
Buena idea amigo
Aqui les dejo como va quedando
Super!!
mobile:
ipad:
Se que no tiene nada que ver pero, jugamos lol profe? >..<
jajaja XD
Interesante, tiene un efecto como de tarjetas. Me estoy imaginando unos portavasos puestos sobre la mesa con ese diseno.
VISTA:
CODIGO:
Esta quedando chevere. Tengo dudas con la fuente que elegiste, que tiene serifas.
:D
listo
Esta quedando muy bonito!
Tengo una duda. Por qué aquí la profe utilizó grid-auto-row en lugar de grid-template-row?
No es del todo igual. La profesora está pensando a futuro :) en que el contenido (la cantidad de platos en este caso) puede crecer. Por eso, si se dejara con grid-template-rows, aparte de agregar los nuevos platos en el HTML, habría que modificar el CSS para que la grilla se volviera a adaptar; al dejarla auto se adaptará solita para recibir nuevo contenido.
grid-template-rows -> Cantidad de filas estática hasta que el código cambie
grid-auto-rows -> Cantidad de filas dinámica de acuerdo al contenido
Tendria sentido un repeat(auto, 1fr) o no ? :/
Como importar varias imágenes con nombres similares usando Emmet Abbreviation
img[src="./images/dish$.png"]*4+img[src="./images/video.png"]
Me encanta maquetar con CSS grid, aunque se me olvide mucho
Pregunta: En las imágenes no es una mejor "práctica", meterlas dentro de un "figure" ?
Si es una buena practica a la hora de crear sitios responsive con múltiples imágenes para cada tipo de pantalla.
De hecho si, según entiendo las etiquetas img pueden ir "sueltas" si solo es una sola imagen, pero cuando es un conjunto de imagenes se les coloca en una etiqueta figure, en este caso hubiese sido mejor que use el figure en ves del div
Les comparto la guía de Mozilla, sobre imágenes.
Agradecido!
Esta fue mi decoracion
Hola ulti, un gusto encontrarte en otro curso jaja. Me parece que te quedaria mejor que en la imagen de la seccion hero en la version mobile se encuentre en columna al igual que en la seccion de info
CSS GRID ES UNA BENDICION , lo que antes me costaba 40 minutos maquetar bien ahora simplemente en 7 lo realizo
COMPUTADORA:
TELEFONO:
