Me doy cuenta de la importancia del Mobile First. Es más complicado hacerlo responsive desde un desktop screen
Introducción a Grid
¿Qué es CSS Grid Layout?
Conceptos para comenzar
Propiedades de Grid
Propiedades del contenedor
Propiedades de alineación
Propiedades de ubicación
Power ups de Grid
Funciones especiales
Keywords especiales
Proyecto
Proyecto
Hagamos nuestra primera sección
Creando la grilla con área
Armando el listado
Bonus
¿Cómo hacer nuestro proyecto responsivo?
Próximos pasos
Más cursos de CSS Grid
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
¿Cómo hacer nuestro proyecto responsivo?
12/13Recursos
Debido a que usamos grid para crear todas las grillas de nuestro proyecto, resulta muy sencillo hacerlo responsivo.
Lo primero es revisar sección por sección para evaluar los cambios que podemos hacer en cada una. Es decir, redimensionar el ancho de la página para ver en qué puntos se rompe el contenido.
Encabezado
Notamos que el texto se rompe al reducir el ancho de la página. Para ello vamos a modificar su grid-template-columns.
- Vamos a la clase que contiene sus estilos .hero.
- Cambiamos el valor de su grid-template-columns, de 2fr a ***minmax(300px, 2fr)***.
.hero {
display: grid;
grid-template-columns: minmax(300px, 2fr) 3fr;
grid-auto-rows: 550px;
border-bottom: 1px solid;
}
Ahora vemos que no se reduce más de 300px y no se rompe.
Para que se adapte al ancho pantalla, usamos los media queries.
- Creamos un media screen que sirva hasta que el ancho supere los 768px
- Llamamos la clase contenedora de la primera sección y aplicamos un mínimo y máximo fijos a sus columnas,
- Centramos el contenedor para evitar que nos sobre demasiado espacio.
@media screen and (max-width: 768px) {
.hero {
grid-template-columns: minmax(300px, 500px);
justify-content: center;
}
.hero-image {
display: none;
}
}
Nuestros servicios
Como vemos, la caja no se adapta. Al redimensionarla se genera un scroll que es bastante molesto para el usuario. Para solucionar este problema, podemos usar auto-fit y que así las cajas se vayan acomodando automáticamente.
- Vamos a la caja contenedora con .dishes-grid.
- Reemplazamos el valor 4 por auto-fit.
- Reemplazamos el valor mínimo por 75px.
.dishes-grid {
display: grid;
**grid-template-columns: repeat(auto-fit, minmax(150px, 200px));**
grid-auto-rows: 1fr;
gap: 25px;
justify-content: center;
}
Creamos dentro del media querie:
.dishes-grid {
grid-template-columns: repeat(auto-fit, minmax(75px, 100px));
}
Home menu
Tenemos el mismo problema que en la sección pasada. Y adivina qué, también lo podemos solucionar con auto-fit.
- Llamamos la clase contenedora con .menu-grid.
- Cambiamos el valor inicial por auto-fit.
- Eliminamos el ancho mínimo y máximo y lo dejamos en 150px para que se mantenga siempre en ese valor.
.menu-grid {
display: grid;
gap: 25px;
justify-content: center;
** grid-template-columns: repeat(auto-fit, 150px);**
}
Hemos terminado nuestro proyecto usando CSS Grid para resolver todos las grillas.
¿Verdad que es muy fácil? Recuerda que puedes cambiar todas las características como tu quieras y hacerlo un proyecto completamente nuevo y diferente. De hecho, te invito a hacerlo. Ya que la mejor forma de aprender es experimentando por ti mismo. ¡Éxitos!
Contribución creada por: José Miguel Ventimilla (Platzi Contributor).
Aportes 86
Preguntas 8
Ordenar por:
Es poco, pero es trabajo honesto :'v
Agregué unos cuantos estilos al proyecto para terminar la parte visual
Este curso fue excelente aprendi mucho sobre Grid pues tenia muchos vacios, pero me ayudo a comprender mejor todos lo conceptos 😃
El curso esta bueno, pero lo ideal hubiera sido desarrollar la carta en first mobile y seguir la ruta del curso de desarrollo web y luego escalarla.
Bueno yo lo hice de esa manera siguiendo la ruta.
Les comparto mi proyecto, aunque visualmente se ve igual le he agregado ciertas cosas que mejoran la performance y la experiencia de usuario.
- A las imágenes en general las he optimizado para que pesen menos paso de 9.04 MG a 232 KB.
- Le he dado una pequeña funcionalidad al botón.
- A la imagen más grade le agregué un video que solo se muestra y comienza a cargar si le das clic a la imagen además de que sale una pequeña animación al cargar.
- Aplique lazy loading (carga lenta) a las imágenes del Menu Home para que solo carguen momentos antes de que el usuario la vea.
- Use persistencia de datos para los like para que independiente de si recargas la página te salga los like que has dado con anterioridad.
Si deseas probar entra aquí y si quieres ver como lo hice entra al repositorio.
Este es el proyecto con algunos cambios.
Voila!!! Aqui el proyecto ya por completo terminado, lo deje lo mejor que pude!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proyecto de la clase</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<section class="hero">
<div class="info">
<h1 class="info-title">Check the <br> best food</h1>
<p class="info-subtitle">Lorem ipsum, dolor sit amet </p>
<button class="info-button">Book a table</button>
</div>
<img class="hero-image" src="./imagenes/hero.png" alt="Plato de pasta con vegetales">
</section>
<section class="dishes">
<h2 class="dishes-title">Our Services</h2>
<div class="dishes-grid">
<img class="dishes-item dishes-item__big" src="./imagenes/video.png" alt="video sobre la comida">
<img class="dishes-item" src="./imagenes/dish1.png" alt="">
<img class="dishes-item" src="./imagenes/dish2.png" alt="">
<img class="dishes-item" src="./imagenes/dish3.png" alt="">
<img class="dishes-item" src="./imagenes/dish4.png" alt="">
</div>
</section>
<section class="menu">
<h2 class="menu-title">Home menu</h2>
<div class="menu-grid">
<div class="menu-grid-item">
<img src="./imagenes/plate1.png" alt="">
</div>
<div class="menu-grid-item">
<img src="./imagenes/plate2.png" alt="">
</div>
<div class="menu-grid-item">
<img src="./imagenes/plate3.png" alt="">
</div>
<div class="menu-grid-item">
<img src="./imagenes/plate4.png" alt="">
</div>
<div class="menu-grid-item">
<img src="./imagenes/plate5.png" alt="">
</div>
</div>
</section>
</main>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
main {
max-width: 1200px;
margin: 0 auto;
}
.hero {
display: grid;
grid-template-columns: minmax(300px, 2fr) 3fr;
grid-auto-rows: 550px;/* ALTURA del contenedor */
border-bottom: 1px solid #ddd;
}
.hero .hero-image {
width: 100%;
height: 100%; /* ALTURA del contenedor */
object-fit: contain; /* La imagen se ajuste al espacio donde esta */
}
.info {
align-self: center; /* Alineamos el contenido del div.info */
}
.info-title {
color: #333;
font-size: 3rem;
font-weight: bolder;
margin-bottom: 24px;
}
.info-subtitle {
color: #333;
font-size: 1.5rem;
margin-bottom: 24px;
}
.info-button {
border: none;
border-radius: 20px;
color: #333;
background-color: #fb8c00;
font-weight: bolder;
padding: 12px 24px;
}
.dishes {
margin: 100px 0;
}
.dishes-title {
color: #333;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
font-size: 2rem;
}
.dishes-grid {
display: grid;
place-content: center;
grid-template-columns: repeat(auto-fit, minmax(75px, 200px)); /* REDUCIMOS el tamaño del grid */
grid-auto-rows: 1fr;
gap: 24px;
}
.dishes-item {
width: 100%;
height: 100%;
object-fit: cover;
}
.dishes-item__big {
grid-area: 1 / 1 / 3 / 3;/* INICIA EN fila 1 y columna 1 / TERMINA EN fila 3 columna 3 */
}
.menu {
margin-bottom: 200px;
}
.menu-title {
font-size: 2rem;
color: #333;
font-weight: bolder;
text-align: center;
margin-bottom: 50px;
}
.menu-grid {
display: grid;
gap: 24px;
justify-content: center;
grid-template-columns: repeat(5, minmax(100px, 250px));
}
.menu-grid-item {
background-color: lightpink;
padding: 12px;
border-top-left-radius: 40px;
}
.menu-grid-item img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media screen and (max-width: 750px) {
main {
display: grid;
}
.hero {
grid-template-columns: minmax(300px, 500px);
justify-content: center;
grid-auto-rows: 300px;
}
.hero-image {
display: none;
}
.hero .info {
margin-left: 40px;
}
.dishes {
margin: 52px;
}
.dishes-grid {
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(50px, 100px));
}
.menu-grid {
margin: 0 16px;
margin-bottom: 60px;
grid-template-columns: repeat(2, minmax(100px, 200px));
grid-auto-rows: auto;
}
}
Con la propiedad filter: drop-shadow, puedes colocar sombra a una imagen sin fondo:
mi reto, enfocado sobretodo en grid
https://codepen.io/xsrpm/full/wvqPJjG
Les muestro mi proyecto a escala, hecho de manera responsive:
Les estaré agradecido me regalen una estrella en mi repositorio.
Gracias.
https://github.com/ArielMejia/food-menu-grid
¿No les molesta que el código compartido no sea el mismo que el código que se generó durante las clases de la profe? Porque a mí sí me causó confusión.
Challenge completed:
.
.
.
.
.
.
.
.
.
.
HTML:
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./projectClass.css">
</head>
<body>
<main>
<section class="hero">
<div class="info">
<h1 class="info-title">Check the<br/>best food</h1>
<p class="info-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor neque sed turpis bibendum dapibus.</p>
<button class="info-button">Book a table</button>
</div>
<figure class="hero-image">
<img src='https://i.ibb.co/R0xYKtR/hero.png' alt="Dish of pasta with neapolitan sauce and vegetables">
</figure>
</section>
<section class="services">
<h2 class="services-title">Our services</h2>
<div class="dishes">
<img class="dishes-image dishes-image__big" src="https://i.postimg.cc/k5qHRc5H/video.png" alt="video of pasta dishes being served">
<img class="dishes-image" src="https://i.postimg.cc/qR0pRyfB/dish1.png" alt="bowl of vegetables with rice and avocado">
<img class="dishes-image" src="https://i.postimg.cc/Wp5sNd5j/dish2.png" alt="Avocado and egg toast">
<img class="dishes-image" src="https://i.postimg.cc/hPwgmHF5/dish3.png" alt="asparagus with tomato and butter">
<img class="dishes-image" src="https://i.postimg.cc/MG08hHnC/dish4.png" alt="eggs and guacamole toast ">
</div>
</section>
<section class="menu">
<h2 class="menu-title">Home menu</h2>
<div class="plates">
<div class="plates-grid-item">
<img src="https://i.postimg.cc/15g1yJgc/plate1.png" alt="pasta with neapolitan sauce and vegetables">
</div>
<div class="plates-grid-item">
<img src="https://i.postimg.cc/cH1P2my3/plate2.png" alt="pasta with broccoli and carrot">
</div>
<div class="plates-grid-item">
<img src="https://i.postimg.cc/rs3bd2dG/plate3.png" alt="pesto pasta">
</div>
<div class="plates-grid-item">
<img src="https://i.postimg.cc/Fsk8MzqT/plate4.png" alt="pasta with avocado and corn">
</div>
<div class="plates-grid-item">
<img src="https://i.postimg.cc/rw63Mc2M/plate5.png" alt="bowl of chicken, tomato and carrots">
</div>
</div>
</section>
</main>
</body>
</html>
.
.
.
CSS:
.
* {
font-family: 'Roboto', sans-serif;
}
main {
max-width: 1200px;
margin: 0 auto;
}
/* Hero */
.hero {
display: grid;
grid-template-columns: minmax(300px, 2fr) 3fr;
grid-auto-rows: 550px;
border-bottom: 1px solid #ddd;
background: linear-gradient(to right, #141e30, #243b55)
}
.hero-image {
margin: 0;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.info {
align-self: center;
display: flex;
flex-direction: column;
padding: 2rem;
z-index: 4;
}
.info-title {
color: #FFFF;
font-weight: bold;
font-size: 2.4rem;
}
.info-subtitle {
color: #FFFF;
font-weight: 400;
line-height: 1.6rem;
}
.info-button {
border: none;
background-color: #fb8c00;
color: #333;
padding: 1rem;
border-radius: 5rem;
width: 8rem;
font-weight: 900;
}
/* Services */
.services {
border-bottom: 1px solid #ddd;
}
.services-title {
color: #333;
font-size: 2rem;
font-weight: 900;
text-align: center;
}
.dishes {
margin: 100px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(75px, 200px));
/* aqui usamos auto-fit para rellenar con las celdas en el espacio correspondiente, lo suficiente para que quepa */
grid-auto-rows: 1fr;
gap: 25px;
justify-content: center;
}
.dishes-image {
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1.6rem;
box-shadow: 0 2px 5px .2px rgba(78, 78, 78, 0.24);
}
.dishes-image__big {
grid-area: 1 / 2 / 3 / 4;
}
/* List */
.menu {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem;;
}
.menu-title {
color: #333;
font-size: 2rem;
font-weight: bolder;
text-align: center;
}
.plates {
display: grid;
gap: 2rem;
justify-content: center;
grid-template-columns: repeat(auto-fit, 150px);
}
.plates-grid-item {
background-color: #333;
padding: 0.8rem;
border-radius: 2rem 2rem 0 2rem;
box-shadow: 0 2px 5px .2px rgb(26, 26, 26);
}
.plates-grid-item img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media screen and (max-width: 760px) {
.hero {
grid-template-columns: minmax(100px, 500px);
justify-content: center;
background-color: linear-gradient(to right, #4b79a1, #283e51);
}
.hero-image {
display: none;
}
.info-title {
color: white;
}
.info-subtitle {
color: white;
}
.services-title {
color: #333;
z-index: 4;
}
.dishes {
grid-template-columns: repeat(auto-fit, minmax(75px, 100px));
}
}
Proyecto final con medias queries
-
Revisa el código en mi repositorio de GitHub
-
Mira directamente la demo
-
Resultado (pantalla grande)
-
Resultado (pantalla mediana)
-
Resultado (pantalla pequeña)
Aquí esta mi código y el vinculo al proyecto, lo hice Mobile first y agregue mediaqueries para Tablet y desktop
Código: https://github.com/Yenda09/restaurant_page
Proyecto: https://yenda09.github.io/restaurant_page/
Tenía todavía muchas “dudas” sobre éste tema. Gracias por el curso. Mi duda es: el usar minmax, no se rompe cuando el sitio se está adaptando para diferentes dispositivos o medidas?
https://cssg-rid-basico.vercel.app/
Acá esta el ejercicio, me mató mucho hacerlo responsive sin mucho código.
Lo que yo creo que hay que cambiar es que al reducir el tamaño de la pantalla deberíamos alinear el H1 y el botón al centro (así como el subtittle) y que los márgenes superiores e inferiores son demasiado grandes, por lo cual está bien reducirlos.
Si quieres ver mi proyecto terminado lo puedes hacer aquí
Les comparto los cambios que realicé:
**Proyecto terminado**
Todos los retos: <https://retos-css-grid-platzi.vercel.app/>
GitHub: <https://github.com/josttme/challenges-css-grid-course-platzi>
me encanta como enseña Estefany salas la mejor
@media screen and (max-width:1024px){
.dishes-grid{
grid-template-columns: repeat(auto-fit, minmax(75px,350px));
}
.menu-grid{
margin: 0 40px;
grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
justify-items: center;
}
}
@media screen and (max-width:768px){
.info{
text-align: center;
}
.hero{
grid-template-columns: minmax(300px, 500px);
justify-content: center;
}
.hero-image{
display: none;
}
.dishes-grid{
grid-template-columns: repeat(auto-fit, minmax(75px,250px));
}
.menu-grid{
margin: 0 40px;
grid-template-columns: repeat(auto-fit, minmax(150px, 250px));
justify-items: center;
}
}
@media screen and (max-width:630px){
.dishes-grid{
grid-template-columns: repeat(auto-fit, minmax(75px,200px));
}
}
@media screen and (max-width:320px){
.dishes-grid{
grid-template-columns: repeat(auto-fit, minmax(75px,100px));
}
}```
Yo había empezado con la idea de mobile-first, aquí les dejo mi repositorio 😄
Recuerden
Primero debemos trabajar en mobile, luego para tablet y desktop. De lo contrario nos complicamos la vida.
Además debemos usar archivos independientes, uno para mobile, tablet y desktop.
Good luck 🤗
✅ Terminado, modifique los media queries y le agregue función a los botones de like, lo pueden probar en CodePen y dejo el repositorio en GitHub 👨💻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<!-- Font Open Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;800&display=swap" rel="stylesheet">
<!-- Font Awesome 4 Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<main>
<section class="principal">
<div class="description">
<div class="info">
<h1>Check The
<br>Best Food
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi corrupti libero aperiam nihil magni perspiciatis ab quis debitis! </p>
<button>
Book a table
<i class="fa fa-long-arrow-right"></i>
</button>
</div>
<img class="info-img" src="https://i.postimg.cc/zD21m9fG/hero.png" alt="Plato de pasta con salsa y verduras">
</div>
</section>
<section class="our-services">
<h2>OUR SERVICES</h2>
<div class="dishes">
<img class="video-img" src="https://i.postimg.cc/k5qHRc5H/video.png" alt="Video of pasta dishes being served">
<div class="dish dish1">
<p>26$</p>
<img class="dish-img" src="https://i.postimg.cc/qR0pRyfB/dish1.png" alt="Bowl of vegetables with rice and avocado">
</div>
<div class="dish dish2">
<p>26$</p>
<img class="dish-img" src="https://i.postimg.cc/Wp5sNd5j/dish2.png" alt="Avocado and egg toast">
</div>
<div class="dish dish3">
<p>26$</p>
<img class="dish-img" src="https://i.postimg.cc/hPwgmHF5/dish3.png" alt="Asparagus with tomato and butter">
</div>
<div class="dish dish4">
<p>26$</p>
<img class="dish-img" src="https://i.postimg.cc/MG08hHnC/dish4.png" alt="Eggs and guacamole toast">
</div>
</div>
</section>
<section class="home-menu">
<h2>Home Menu</h2>
<div class="menus">
<div class="menu menu1">
<i class="fa fa-heart fa-lg" onclick="toggleLike(this)"></i>
<img class="menu-img" src="https://i.postimg.cc/15g1yJgc/plate1.png" alt="Pasta with Neapolitan sauce and vegetables">
</div>
<div class="menu menu2">
<i class="fa fa-heart fa-lg" onclick="toggleLike(this)"></i>
<img class="menu-img" src="https://i.postimg.cc/cH1P2my3/plate2.png" alt="Pasta with broccoli and carrot">
</div>
<div class="menu menu3">
<i class="fa fa-heart fa-lg" onclick="toggleLike(this)"></i>
<img class="menu-img" src="https://i.postimg.cc/rs3bd2dG/plate3.png" alt="Pesto pasta">
</div>
<div class="menu menu4">
<i class="fa fa-heart fa-lg" onclick="toggleLike(this)"></i>
<img class="menu-img" src="https://i.postimg.cc/Fsk8MzqT/plate4.png" alt="Pasta with avocado and corn"">
</div>
<div class="menu menu5">
<i class="fa fa-heart fa-lg" onclick="toggleLike(this)"></i>
<img class="menu-img" src="https://i.postimg.cc/rw63Mc2M/plate5.png" alt="Bowl of chicken, tomato and carrots">
</div>
</div>
</section>
</main>
<script>
function toggleLike(button) {
button.classList.toggle("orange");
}
</script>
</body>
</html>
:root {
--space-base: 30px;
--orange: rgba(225,116,48,1);
--light-orange: rgb(255, 186, 137);
--green: #21e0c4;
--dark-green: #20bbd2;
--dark-blue: #0f396a;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
font-family: 'Open Sans', sans-serif;
}
main {
max-width: 80vw;
margin: 0 auto;
font-size: 1.6rem;
}
.description {
display: grid;
grid-template-columns: minmax(400px, 1fr) 1fr;
grid-auto-rows: 500px;
}
.description .info {
margin-left: var(--space-base);
margin-right: calc(var(--space-base) * 2);
align-self: center;
}
.info h1 {
color: var(--dark-blue);
font-size: 4.8rem;
font-weight: 900;
line-height: 4.8rem;
}
.info p {
margin: var(--space-base) 0;
}
.info button {
padding: calc(var(--space-base) / 3) var(--space-base) ;
font: inherit;
color: white;
background: linear-gradient(180deg, var(--light-orange) 25%, var(--orange) 100%);
border: none;
border-radius: var(--space-base);
outline: inherit;
cursor: pointer;
}
.description .info-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.our-services h2 {
margin-top: var(--space-base);
color: var(--dark-blue);
font-weight: 500;
text-align: center;
}
.dishes {
margin: var(--space-base) 0;
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(120px, 220px));
grid-template-rows: 1fr;
gap: calc(var(--space-base));
justify-content: center;
}
.video-img,
.dish-img {
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: cover;
}
.dishes .video-img {
grid-area: 1/1/3/3;
}
.dish {
position: relative;
}
.dishes p {
position: absolute;
left: 10px;
bottom: 10px;
font-size: 2.2rem;
color: white;
text-shadow: 1px 1px 2px #1b1b1b;
}
.home-menu h2 {
padding-top: var(--space-base);
color: var(--dark-blue);
font-weight: 500;
text-align: center;
}
.menus {
margin: var(--space-base) 0;
display: grid;
grid-template-columns: repeat(5, minmax(50px, 200px));
gap: var(--space-base);
justify-content: center;
}
.menu-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.menu {
position: relative;
padding: calc(var(--space-base) / 2);
background-color: var(--light-orange);
border-radius: var(--space-base) 5px 5px 5px;
}
.fa-heart {
position: absolute;
right: 10px;
top: 10px;
color: var(--green);
cursor: pointer;
filter: drop-shadow(0px 3px 2px rgb(0 0 0 / 0.4));
}
.fa-heart::after {
content: '';
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.fa-heart:active {
top: 12px;
filter: none;
}
.orange {
color: var(--orange);
}
@media screen and (max-width: 768px) {
.description {
grid-template-columns: minmax(300px, 500px);
}
.description .info {
margin-left: 0;
margin-right: 0;
}
.info-img {
display: none;
}
.dishes {
grid-template-columns: repeat(auto-fit, minmax(75px, 120px));
gap: calc(var(--space-base) / 2);
}
.menus {
grid-template-columns: repeat(auto-fit, minmax(90px, 120px));
gap: calc(var(--space-base) / 2);
}
.menu {
padding: calc(var(--space-base) / 3);
border-radius: calc(var(--space-base) / 1.5) 3px 3px 3px;
}
.fa-heart {
right: 8px;
top: 8px;
}
}
@media screen and (max-width: 320px) {
.description h1 {
font-size: 3.6rem;
line-height: 3.6rem;
}
.info {
width: 200px;
}
.dishes {
grid-template-columns: repeat(auto-fit, minmax(75px, 100px));
gap: calc(var(--space-base) / 2);
}
.menus {
grid-template-columns: repeat(auto-fit, minmax(90px, 160px));
gap: calc(var(--space-base) / 2);
}
}
a mi parecer así ya se ve muy bien
Aca dejo mi proyecto, cambie las imagenes para que las recolecte de una API, entre otras cosas, muchas gracias por el curso!
El único cambio que le hice, fue que en viewports pequeños sí se muestre la imagen del hero, pero antes de la sección info.
Ojo, usar background img no es recomendable en este caso, el uso de bg img debe ser ligado a imagenes meramente decorativas. En este caso sería una mala practica porque la imagen en sí es la presentación de un producto, lo cual restaría accesabilidad a la pagina con el uso de un lector de pantalla, por ejemplo.
El mio quedo de esta manera:
Así quedó mi proyecto final:
Desktop
Tablet
Mobile
-
Le agregué algo sombra al lado derecho e izquierdo en desktop para que se resalte el contenedor principal y que sea vea como un menú de comidas o algo así.
-
Agregué los iconos de redes sociales.
-
Le puse borde redondeado a los platos de Our services (Me gusta más así, pues se ve como moderno)
-
Le agregué los corazones a los platos de Home menu.
-
En cuando al responsive, en la sección del hero (en mi caso banner) utilicé auto-fit para que cuando se haga chica la pantalla la imagen salte hacia abajo del texto y demás elementos.
Básicamente eso sería todo. Tal vez se me pasan algunos detallitos más, pero seguro que se pueden observar a simple vista.
Debido a que usamos grid para crear todas las grillas de [nuestro proyecto](https://platzi.com/clases/2474-css-grid/42189-proyecto/), resulta muy sencillo hacerlo responsivo.
Lo primero es revisar sección por sección para evaluar los cambios que podemos hacer en cada una. Es decir, redimensionar el ancho de la página para ver en qué puntos se rompe el contenido.
## Encabezado
Notamos que el texto se rompe al reducir el ancho de la página. Para ello vamos a modificar su grid-template-columns.
* Vamos a la clase que contiene sus estilos ***.hero***.
* Cambiamos el valor de su ***grid-template-columns***, de ***2fr*** a \*\*\*minmax(300px, 2fr)\*\*\*.
`.hero` {
` display`: grid;
` grid-template-columns: minmax(300px, 2fr) 3`fr;
` grid-auto-rows: 550px`;
` border-bottom: 1px` solid;
}
Ahora vemos que no se reduce más de 300px y no se rompe.
Para que se adapte al ancho pantalla, usamos los media queries.
* Creamos un media screen que sirva hasta que el ancho supere los 768px
* Llamamos la clase contenedora de la primera sección y aplicamos un mínimo y máximo fijos a sus columnas,
* Centramos el contenedor para evitar que nos sobre demasiado espacio.
`@media screen and (max-width: 768px`) {
` .hero` {
` grid-template-columns: minmax`(300px, 500px);
` justify-content`: center;
}
` .hero-image` {
` display`: none;
}
}
## Nuestros servicios
Como vemos, la caja no se adapta. Al redimensionarla se genera un scroll que es bastante molesto para el usuario. Para solucionar este problema, podemos usar **auto-fit** y que así las cajas se vayan acomodando automáticamente.
* Vamos a la caja contenedora con ***.dishes-grid***.
* Reemplazamos el valor ***4*** por ***auto-fit***.
* Reemplazamos el valor mínimo por 75px.
`.dishes-grid` {
` display`: grid;
` **grid-template-columns: repeat(auto-fit, minmax(150px, 200px`));\*\*
` grid-auto-rows: 1`fr;
` gap: 25px`;
` justify-content`: center;
}
Creamos dentro del media querie:
` .dishes-grid` {
` grid-template-columns: repeat`(auto-fit, minmax(75px, 100px));
}
## Home menu
Tenemos el mismo problema que en la sección pasada. Y adivina qué, también lo podemos solucionar con **auto-fit**.
* Llamamos la clase contenedora con ***.menu-grid***.
* Cambiamos el valor inicial por ***auto-fit***.
* Eliminamos el ancho mínimo y máximo y lo dejamos en ***150px*** para que se mantenga siempre en ese valor.
`.menu-grid` {
` display`: grid;
` gap: 25px`;
` justify-content`: center;
` ** grid-template-columns: repeat(auto-fit, 150px`);\*\*
}
Hemos terminado nuestro proyecto usando CSS Grid para resolver todos las grillas.
¿Verdad que es muy fácil? Recuerda que puedes cambiar todas las características como tu quieras y hacerlo un proyecto completamente nuevo y diferente. De hecho, te invito a hacerlo. Ya que la mejor forma de aprender es experimentando por ti mismo. ¡Éxitos!
mi proyecto
Les comparto mi proyecto y espero le pueda ayudar en algo.
Repositorio: https://github.com/codepalacios/proyecto-curso-css-grid-basico/tree/master
URL del sitio: https://codepalacios.github.io/proyecto-curso-css-grid-basico/
Adicionalmente quiero felicitar a la profesora ya que a mi punto de vista fue excepcional su desempeño en todo el curso 😃
Buenas, les presento mi proyecto.
Se agradece mucho el feedback!
.
.
Versión Desktop
.
.
.
Versión Mobile
Les dejo mi proyecto con cambios en el hero y el menú para la versión responsive, sobretodo el menú lo adapte a flexbox, acá es donde se ve lo valioso de combinar flex y grid.
Saludos y espero que alguno pueda aprender algo interesante de mi proyecto.
Así queda mi ejemplo:
Móvil
Tablet
Laptop
El curso esta chevere, pero después de intentarlo como sugiere Estefany aquí, me quedo con lo aprendido en el curso de maquetación MobileFirst de Diego Granda, si a alguien que este realizando este curso le sirve la sugerencia 😃
Por eso recordar siempre tomar el
Curso Mobile First con el profe Diego de Granda.
https://platzi.com/cursos/mobile-first/
Asi quedo el mio 😄
Hola a todos, desde que comenzamos el proyecto lo hice con el principio de mobile first ya que es una buena práctica. También agregué un scroll horizonal en la parte del menu. Aquí estan los links del repo; como también del pequeño video que grabé para que vean la parte del scroll horizontal.
Video: https://www.loom.com/share/1dc5778bce554750bcee10ffb1503a1b
Repositorio: https://github.com/raycris/restaurant-page.git
Hola a todos, acá está el repositorio final con todos los materiales, del curso, los retos de cada clase y el proyecto final del curso. Saludos
Les presento mi proyecto final, costo un poco pero lo logramos
Este es el proyecto final
https://sartheghost.github.io/GRID/
Quedo igual pero con unos pequeños cambios
.dishe__big {
grid-row: auto / span 2;
grid-column: auto / span 2;
}
Pantallazos del proyecto
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Reto Clase 8</title>
</head>
<body>
<main>
<section class="hero">
<div class="info">
<h1 class="inf-title">Check the <br>best food</h1>
<p class="info-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, alias!</p>
<button class="info-button">Book a table</button>
</div>
<img class="hero-image" src="./assets/hero.png" alt="Plato de pasta con vegetables">
</section>
<section class="dishes">
<h2 class="dishes-title">Our services</h2>
<div class="dishes-grid">
<img class="dishes-item dishes-item__big" src="./assets/video.png" alt="Una mesa con platos de pasta">
<img class="dishes-item"src="./assets/dish1.png" alt="">
<img class="dishes-item"src="./assets/dish2.png" alt="">
<img class="dishes-item"src="./assets/dish3.png" alt="">
<img class="dishes-item"src="./assets/dish4.png" alt="">
</div>
</section>
<section class="menu">
<h2 class="menu-title">Home menu</h2>
<div class="menu-grid">
<div class="menu-grid-item">
<img src="./assets/plate1.png" alt="Plato de pasto con salsa y vegetables">
</div>
<div class="menu-grid-item">
<img src="./assets/plate2.png" alt="Plato de pasto con salsa y vegetables">
</div>
<div class="menu-grid-item">
<img src="./assets/plate3.png" alt="Plato de pasto con salsa y vegetables">
</div>
<div class="menu-grid-item">
<img src="./assets/plate4.png" alt="Plato de pasto con salsa y vegetables">
</div>
<div class="menu-grid-item">
<img src="./assets/plate5.png" alt="Plato de pasto con salsa y vegetables">
</div>
</div>
</section>
</main>
</body>
</html>
CSS
* {
box-sizing: border-box;
/* margin: 0; */
padding: 0;
font-family: 'Roboto', sans-serif;
}
main {
max-width: 1200px;
margin: 0 auto;
}
.hero {
display: grid;
grid-template-columns: minmax(300px, 2fr) 3fr;
grid-auto-rows: 550px;
}
.hero-image {
width: 70%;
align-self: center;
object-fit: scale-down;
}
.info {
align-self: center;
}
.info-title {
color: #333;
font-size: 3rem;
font-weight: bolder;
margin-bottom: 24px;
}
.info-subtitle {
color: #333;
font-size: 1.5rem;
margin-bottom: 24px;
}
.info-button {
border: none;
border-radius: 20px;
color: #333;
background-color: #fb8c00;
font-weight: bolder;
padding: 12px 24px;
}
.dishes {
margin: 100px 0;
}
.dishes-grid {
display: grid;
grid-template-columns: repeat(4, minmax(75px, 200px));
grid-auto-rows: 1fr;
gap: 25px;
justify-content: center;
}
.dishes-title {
color: #333;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
font-size: 2rem;
}
.dishes-item {
width: 100%;
height: 100%;
object-fit: cover;
}
.dishes-item__big {
grid-area: 1 / 1 / 3 / 3;
}
.menu {
margin-bottom: 80px;
}
.menu-title {
font-size: 2rem;
color: #333;
font-weight: bolder;
text-align: center;
margin-bottom: 40px;
}
.menu-grid {
display: grid;
gap: 25px;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
}
.menu-grid-item {
background-color: rgb(245, 228, 222);
padding: 15px;
border-top-left-radius: 40px;
}
.menu-grid-item:hover {
background-color: rgb(255, 255, 255);
padding: 1px;
/* border-bottom-right-radius: 40px; */
border-radius: 50%;
border: 2px ridge lightgray;
}
.menu-grid-item img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media screen and (max-width: 768px) {
.hero {
grid-template-columns: 1fr 2fr 2fr 1fr;
grid-template-rows: 1fr 1fr;
justify-content: center;
}
.hero-image {
width: 100%;
grid-area: 1 / 2 / 2 / 4;
}
.info-subtitle {
font-size: 1rem;
}
.info {
display: grid;
justify-items: center;
grid-area: 2 / 2 / 3 / 4;
}
.dishes-grid {
grid-template-columns: repeat(auto-fit, minmax(100px, 150px));
}
}
Acá dejo como me quedó a mi🙂
Hola comunidad
Acá les dejo el enlace a mi proyecto final, el cual está ubicado en GitHub:
https://giulianodeleonardis.github.io/gridLayout/
Les comparto mi proyecto:
Repositorio: https://github.com/Canti21/basic-css-grid
Despliegue: https://canti21.github.io/basic-css-grid/
Vista previa:
Aprendiendo cada día más…
-Proyecto Terminado
-Trabajo 100% Responsivo
Les comparto el link del repositorio, el cual también pueden ver en live Repositorio
También de un curso realizado anteriormente comparto este aporte de otro compañero de esta extensión que nos permite visualizar varias pantallas de dispositivos móviles al tiempo Responsive Viewer
Les dejo el repositorio y la vista de la web, tiene algunas modificaciones.
Compañero envío el link del repo : https://github.com/alejandrozambrano/proyecto_Grid_basic
* {
font-family: 'Roboto', sans-serif;
}
main {
max-width: 1200px;
margin: 0 auto;
}
.hero {
display: grid;
grid-template-columns: 2fr 3fr;
grid-auto-rows: 550px;
border-bottom: 1px solid #ddd;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.info {
align-self: center;
}
.info-title {
color: #333;
font-size: 3rem;
font-weight: bolder;
margin-bottom: 24px;
}
.info-subtitle {
color: #333;
font-size: 1.5rem;
margin-bottom: 24px;
}
.info-button {
border: none;
border-radius: 20px;
color: #333;
background-color: #fb8c00;
font-weight: bolder;
padding: 12px 24px;
}
.dishes {
margin: 100px 0;
}
.dishes-title {
color: #333;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
font-size: 2rem;
}
.dishes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(75px, 200px));
grid-auto-rows: 1fr;
gap: 35px;
justify-content: center;
}
.disches-item {
width: 100%;
height: 100%;
object-fit: cover;
}
.disches-item__big {
grid-area: 1 / 1 / 3 / 3;
}
.menu {
margin-bottom: 200px;
}
.menu-title {
font-size: 2rem;
color: #333;
font-weight: bolder;
text-align: center;
margin-bottom: 50px;
}
.menu-grid {
display: grid;
gap: 25px;
justify-content: center;
grid-template-columns: repeat(auto-fit, 150px);
}
.menu-grid-item {
background-color: #333;
padding: 15px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.menu-grid-item img {
width: 100%;
height: 100%;
object-fit: contain;
filter:drop-shadow(4px 6px 15px #333);
}
@media screen and (max-width: 768px) {
.hero-image {
grid-area: 1 / 1 / 1 / 1;
width: 90%;
margin-top: 10px;
place-self: center;
}
.hero {
grid-template-columns: minmax(300px, 500px);
justify-content: center;
}
.dishes-grid {
grid-template-columns: repeat(auto-fit, minmax(75px, 100px));
}
.info {
align-self:initial;
}
Les muestro mi proyecto le hice unas modificaciones basicas y asi quedo
proyecto-https://cuanticat.github.io/CssGrid/
repositorio-https://github.com/CuantiCat/CssGrid
No logre hacerlo totalmente resposive, seguiré aprendiendo, mientras comparto mi avance.
Proyecto contemplando mobile first y con algunos media queries para mejorar la vista según el viewport
https://codepen.io/aloayzab88/pen/dydRGej
Dejo el repo de mi proyecto 😄
https://github.com/papitapapita/grid_exercises
El resultado de mi proyecto
Le agregué un par de animaciones.
Mobile:
Este es mi resultado, hice algunos cambios como centrar los textos del hero, deje la grilla del hero con cada sección de 1fr y le deje un max-width de 900px entre otros cambios.
Excelente curso.
Si bien este curso se centra en CSS Grid, para la sección del menú podría lograrse un mejor resultado con display Flex.
Por ejemplo, se podría centrar los elementos cuando saltan de línea.
Recomiendo fuertemente a los que siguieron este curso que sigan aprendiendo CSS Grid y que también agreguen flexbox a su caja de herramientas para tomar lo mejor de cada mundo en los momentos oportunos.
Pase lo que pase… nunca dejes de aprender 💚🚀
Mobile
Tablet
Laptop
Pc
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
body{
margin: 0;
padding: 0;
}
*{
font-family: 'Roboto', sans-serif;
}
main{
max-width: 1200px;
margin: 0 auto;
}
.hero{
display: grid;
grid-template-columns: minmax(300px, 2fr) 3fr;
grid-template-rows: 450px;
border-radius: 50px;
box-shadow: 5px 5px 5px #aaaaaa;
}
.info{
align-self: center;
padding-left:50px ;
padding-bottom: 25px;
}
.hero-img img{
width: 100%;
height: 400px;
object-fit: contain;
}
.info-title{
color: #333;
font-size: 3rem;
font-weight: bolder;
margin-bottom: 24px;
}
.info-suntitle{
color: #333;
font-size: 1.5rem;
margin-bottom: 24px;
}
.info-button{
border: none;
border-radius: 20px;
font-size: 1rem;
color: #333;
background-color: #fb8c00;
font-weight: bolder;
padding: 12px 24px;
}
.dishes{
margin:100px 0;
}
.dishes-title{
color: #333;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
font-size: 2rem;
}
.dishes-grid{
display: grid;
grid-template-columns: repeat(4,minmax(75px, 200px));
grid-auto-rows: 1fr;
gap: 25px;
justify-content: center;
}
.dishes-grid img{
width: 100%;
height: 100%;
object-fit: cover;
}
.dishes-item__big{
grid-area: 1/1/3/3;
}
.menu{
margin-bottom: 50px;
}
.menu-title{
font-size: 2rem;
color: #333;
font-weight: bolder;
text-align: center;
margin-bottom: 50px;
}
.menu-grid{
display: grid;
gap: 25px;
justify-content: center;
grid-template-columns: repeat(5, minmax(150px, 250px));
}
.menu-grid-item{
background-color: papayawhip;
padding: 15px;
border-top-left-radius: 40px;
}
.menu-grid-item img{
width: 100%;
height: 100%;
object-fit: contain;
}
@media screen and (max-width:1990px) {
.info-title{
font-size: 2.5rem;
}
.info-suntitle{
font-size: 1.2rem;
}
.info-button{
font-size: 1rem;
}
}
@media (max-width:768px) {
main{
width: 100%;
}
.hero{
border-radius: unset;
box-shadow: none;
}
.info{
padding: 0;
display: flex;
flex-direction: column;
}
.info-title{
font-size: 3rem;
text-align: center;
}
.info-suntitle{
text-align: center;
}
.info-button{
width: 50%;
align-self: center;
}
.hero{
grid-template-columns: minmax(300px, 500px);
justify-content: center;
}
.hero-img{
display: none;
}
.dishes-grid{
grid-template-columns: repeat(auto-fit,minmax(75px, 150px));
}
.menu-grid{
grid-template-columns: repeat(auto-fit, 140px);
}
}
@media (max-width:320px) {
.hero{
padding-left: 10px;
padding-right: 10px;
}
.dishes{
padding-left: 10px;
padding-right: 10px;
}
}
Mis cambios fueron:
-
Eliminé la altura fija del header porque cuando se achica la pantalla queda mucho espacio.
-
Los títulos los puse como primera fila en el grid.
-
Eliminé el auto-fit de dishes y menú y en el media query pasé la grid de 4 columnas a 2 columnas.
-
En el menú a las imágenes les puse un borde inferior derecho redondeado y una pequeña sombra como para dar sensación de botón.
-
Hice que el ancho de dishes coincida con el de menú.
Este fue mi responsive, es poco pero es trabajo honesto XD
Tenemos proyecto terminado 😎 🚀
Repositorio GitHub: https://github.com/iJCode1/CSS_Grid_Basico-Platzi
.
🌐 GitHub Pages: https://ijcode1.github.io/CSS_Grid_Basico-Platzi/proyecto/
.
Vista Desktop:
.
Vista Tablet:
.
Vista Móvil:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?