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
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 35
Preguntas 3
Les presento mi proyecto final, con solo ligeros cambios porque me gusto el curso y el diseño base.
proyecto: https://cristhyanpm.github.io/platzi-css-grid-basic-project/
repositorio: https://github.com/CristhyanPM/platzi-css-grid-basic-project
Debería verse así:
Éxitos a todos!!
Agregué unos cuantos estilos al proyecto para terminar la parte visual
Me doy cuenta de la importancia del Mobile First. Es más complicado hacerlo responsive desde un desktop screen
Este curso fue excelente aprendi mucho sobre Grid pues tenia muchos vacios, pero me ayudo a comprender mejor todos lo conceptos 😃
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;
}
}
Mi repo del proyecto final
Así quedo:
Les comparto mi proyecto, aunque visualmente se ve igual le he agregado ciertas cosas que mejoran la performance y la experiencia de usuario.
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.
mi reto, enfocado sobretodo en grid
https://codepen.io/xsrpm/full/wvqPJjG
Es poco, pero es trabajo honesto :'v
Aqui el proyecto final, le puse unas transiciones pequeñas y unos degradados, así como unos bordes y unos íconos para las redes sociales
Página: https://ayrtonfidel9.github.io/food-page/
Repositorio:https://github.com/AyrtonFidel9/food-page
Este es el proyecto con algunos cambios.
Les comparto los cambios que realicé:
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
https://cssg-rid-basico.vercel.app/
Acá esta el ejercicio, me mató mucho hacerlo responsive sin mucho código.
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?
Dejo el repo de mi proyecto 😄
https://github.com/papitapapita/grid_exercises
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.
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:[email protected];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;
}
}
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/
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? Crea una cuenta o inicia sesión.