solo pongan lorem y al costado el número de palabras que quieren, por ejemplo lorem5 que dará un Lorem ipsum con 5 palabras
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,
Hagamos nuestra primera sección
9/13Recursos
El primer paso antes de crear el código es analizar las etiquetas que utilizaremos en la construcción de nuestro proyecto.
Maquetación del proyecto
- Observamos un título, un párrafo y un botón del lado izquierdo, y una imagen del derecho. Con eso podemos empezar a crear las etiquetas h1, p, button e img.
- Empezamos creando una sección con una clase identificativa.
- Dentro, creamos un div con su clase identificadora para uno de los lados que contendrá el texto, mientras que el otro será la etiqueta img, también con su clase.
- Por último, agregamos el contenido que observamos en la imagen.
Nota: para generar un lorem ipsum en html, sólo es necesario colocar el número de palabras que deseamos seguido de la palabra lorem. Ej: lorem5 generará cinco palabras.
<section class="hero">
<div class="info">
<h1>Check the<br>best food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>Book a table</button>
</div>
<img class="hero-image" src="./img/hero.png" alt="Plato de pasta y vegetales">
</section>
Estilos del proyecto
- Llamamos la primera sección desde su clase con .hero.
- Por supuesto, aplicamos display: grid para que todo el contenido herede esta propiedad.
- Ajustamos el ancho de las dos columnas, logrando que la de la imagen sea una fracción más ancha que la del texto con grid-template-columns: 2fr 3fr.
- Ajustamos el alto de las filas en un máximo de 400px con grid-auto-rows: 400px.
- Luego, llamamos la imagen desde su clase con .hero-image.
- Le damos un alto y ancho del 100% para que siempre ocupe el total del contenedor, sin crecer demasiado ni romperse.
object-fit: contain nos ayuda a que la imagen se ajuste al espacio que está ocupando. La propiedad contain permite que siempre se vea completa.
Por último, alineamos el texto verticalmente con align-self: center.
.hero {
display: grid;
grid-template-columns: 2fr 3fr;
grid-auto-rows: 400px;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.info {
align-self: center;
}
Este sería nuestro resultado visto desde el inspector de elementos:
Se ve bastante bien. Pero aún nos falta algunos detalles por terminar de la primera sección. No nos demoremos más y vamos por ello.
Contribución creada por: José Miguel Ventimilla (Platzi Contributor) con aportes de
Juan Carlos Valencia López.
Aportes 61
Preguntas 1
Ordenar por:
Asi quedo responsive 😁
https://developer.mozilla.org/es/docs/Web/CSS/object-fit
En el enlace mas info de object-fit 😄
Así quedó todo
Y este fue el código
Pero no es m{as facil simplemente agregarle un tamaño de altura (height) a la imagen y con la propiedad object-fit simplementa ya se ajusta al tamaño del contenedor, yo le hice asi y me quedó igual
Les comparto una guía sobre “Media Queries”. Creo que, les ayudará a mejorar mucho su “Grid”.
Mi aporte
El icono de la flecha lo saque de fontawesome y el color lo copie utilizando la extension ColorPick Eyedropper que te permite saber el color html de las paginas tan solo haciendo click sobre el color.
Les dejo información acerca del object-fit
Consejo cuando quieran usar el max-width o el min-width existe una función de css que se llama clamp() la cual nos permite darle un max y un min y un tamaño ideal, de esta manera se adaptara de acuerdo a esos tamaños conforme al ancho y alto de la pantalla nos puede ahorrar mucho cuando hacemos responsive o cuando queremos que una imagen se acople al tamaño de las pantallas.
La quise terminar y así me quedó:
COMPUTADORA:
TELEFONO:
Seguí lo de la clase, pero empecé desde mobile, siguiendo la idea de mobile-first, a ver que tal sale…
mi resultado de la clase:
Mi intento
Multipliquen lorem por la cantidad que deseen de palabras ejemplo: loremx5, loremx10, loremx20 etc.
Aqui dejo el mio, cualquier feedback sobre mi codigo viene de maravilla para mi 😄
Codigo Emmet:
main>section.hero>(div>h1{Check the best food}+p{Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}+button{Book a table})+img
Codigo Emmet...
```
main>section.hero>(div>h1{Check the best food}+p{Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}+button{Book a table})+img
```
Codigo Emmet
```
main>section.hero>(div>h1{Check the best food}+p{Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}+button{Book a table})+img
```
Pegue la imagen hacia la izquierda, creándole un contenedor div y con justify-self: start;
Mi proyecto <https://64738k.csb.app/>
El primer paso antes de crear el código es analizar las etiquetas que utilizaremos en la construcción de nuestro proyecto.
## Maquetación del proyecto
* Observamos un título, un párrafo y un botón del lado izquierdo, y una imagen del derecho. Con eso podemos empezar a crear las etiquetas ***h1***, ***p***, ***button*** e ***img***.
* Empezamos creando una sección con una clase identificativa.
* Dentro, creamos un ***div*** con su clase identificadora para uno de los lados que contendrá el texto, mientras que el otro será la etiqueta ***img***, también con su clase.
* Por último, agregamos el contenido que observamos en la imagen.
**Nota**: para generar un lorem ipsum en html, sólo es necesario colocar el número de palabras que deseamos seguido de la palabra lorem. Ej: ***lorem5*** generará cinco palabras.
` <section class="hero"`>
`
`
` Check the
`
`
`
` `
` </section>`
## Estilos del proyecto
* Llamamos la primera sección desde su clase con .hero.
* Por supuesto, aplicamos display: grid para que todo el contenido herede esta propiedad.
* Ajustamos el ancho de las dos columnas, logrando que la de la imagen sea una fracción más ancha que la del texto con ***grid-template-columns: 2fr 3fr***.
* Ajustamos el alto de las filas en un máximo de 400px con ***grid-auto-rows: 400px***.
* Luego, llamamos la imagen desde su clase con ***.hero-image***.
* Le damos un alto y ancho del 100% para que siempre ocupe el total del contenedor, sin crecer demasiado ni romperse.
***object-fit: contain*** nos ayuda a que la imagen se ajuste al espacio que está ocupando. La propiedad contain permite que siempre se vea completa.
Por último, alineamos el texto verticalmente con ***align-self: center***.
`.hero` {
` display`: grid;
` grid-template-columns: 2fr 3`fr;
` grid-auto-rows: 400px`;
}
`.hero-image` {
` width: 100%`;
` height: 100%`;
` object-fit`: contain;
}
`.info` {
` align-self`: center;
}
Este sería nuestro resultado visto desde el inspector de elementos:
Se ve bastante bien. Pero aún nos falta algunos detalles por terminar de la primera sección. No nos demoremos más y vamos por ello.Check the
best food
`
` Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
` ` <button>Book a table</button>` `
hasta el boton
Sería bueno que suban el proyecto en figma
asi me quedo
https://willy23jaramillo.github.io/cssgrid-nuevo/
yo lo hice asi le di un poco de estilos para que se viera mas colorido
Así me va quedando
Mi avance - sección 1
-
Revisa el repositorio para ver el código fuente
-
Mira directamente la demo
-
Resultado:
Primera parte completed
Siendo sincero, batallo mucho con grid, pero veo las cosas más prácticas que usando flexbox y mal flexbox.
que hermosa clase
La version que hice le agregué la parte responsive, empecé a desarrollar con el concepto de mobile first. en el archivo de HTML notaran que tengo dos hojas de estilos liquiada, la principal es styles, que son los estilos principales y los que se trabajan para la parte de mobile, después la segunda llamada tablet es para que se vaya acomodando cuando la pantalla va creciendo hasta termianr con el tamaño de una laptop o mayor. Nótese que algunas clases del archivo styles.css estaran repetidas en el archivo de tablet.css porque estas clases son las quetenemos que realizar cambios para que se puedan ver bien los cambios conforme se vaya ampliando la pantalla.
Responsive:
Pantalla normal
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" />
<link rel="stylesheet" href="./styles.css" />
<link rel="stylesheet" href="./tablet.css" media="(min-width: 930px)" />
<title>Document</title>
</head>
<body>
<main>
<section class="hero">
<div class="info--hero">
<h1>Check The Best Food</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias
voluptatem expedita iusto pariatur nostrum, qui exercitationem magni
sapiente distinctio, dicta neque. Sit, assumenda asperiores! Dolorem
corporis minima quasi. Nesciunt, nostrum.
</p>
<button class="btn--hero">Book a table</button>
</div>
<picture class="container__image--hero">
<img
class="image--hero"
src="./images/hero.png"
alt="pasta con vegetales"
/>
</picture>
</section>
</main>
</body>
</html>
Archivo styles.css
* {
font-family: "roboto", sans-serif;
}
main {
margin: 0 auto;
max-width: 1200px;
}
.info--hero {
display: flex;
min-width: 288px;
align-items: center;
flex-direction: column;
}
.info--hero h1 {
text-align: center;
}
.info--hero p {
hyphens: auto;
}
.container__image--hero {
display: flex;
min-width: 288px;
justify-content: center;
}
.image--hero {
width: 90%;
margin-top: 10px;
background-size: cover;
}
.btn--hero{
color: #fd8801;
width: 140px;
height: 38px;
border: 1px solid #fd8801;
cursor: pointer;
font-weight: 600;
border-radius: 12px;
background-color: transparent;
}
.btn--hero:hover{
color: #FFF;
background-color: #fd8801;
}
archivo tablet.css
.hero {
display: grid;
grid-auto-rows: 400px;
grid-template-columns: 2fr 3fr;
}
.info--hero{
align-self: center;
}
.image--hero {
width: 100%;
height: 100%;
object-fit: contain;
}
aprender grid es lo mejor creo que es una gran forma de darle forma a los contenedores
Así me quedo esta primera parte, veré que puedo mejorar en la siguiente clase 🚀
<!-- Font Awesome 4 Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- ... -->
<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>
:root {
--space-base: 30px;
}
* {
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: 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: #0a1a2d;
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, rgb(250, 172, 116) 25%, rgba(225,116,48,1) 100%);
border: none;
border-radius: var(--space-base);
outline: inherit;
cursor: pointer;
}
.description .info-img {
width: 100%;
height: 100%;
object-fit: contain;
}
Así va quedando con los colores de Platzi
jeje!!
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');
* {
font-family: 'Poppins', sans-serif;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 30px;
}
.hero {
display: grid;
grid-template-columns: 2fr 3fr;
grid-auto-rows: 400px;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.info {
align-self: center;
}
.info > h1 {
margin: 0;
font-size: 3rem;
}
.info > button {
margin-top: 30px;
color: white;
border: none;
background-color: orangered;
font-size: 16px;
border-radius: 25px;
padding: 15px 40px;
font-weight: bolder;
cursor: pointer;
}
object-fit indica cómo el contenido de un elemento reemplazado, por ejemplo un <img> o <video> , debería redimensionarse para ajustarse a su contenedor. Se puede alterar la alineación del contenido del elemento reemplazado utilizando la propiedad object-position
😃 para el Lorem ipsum pueden abrir la etiqueta <p> dar un espacio y escribir lorem+numerodepalabras en mi caso yo puse lorem+50 y oprimi Tab despues de eso y autogenera el lorem ipsum en este caso con 50 palabras.
celular:
ipad:
<!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>Document</title>
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" media="(min-width:600px)" href="/ipad.css">
</head>
<body>
<main>
<section class="hero">
<div class="hero-info">
<h1>Check the<br> best food</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis dolorem veniam consequatur mollitia quisquam maxime officiis reiciendis sapiente quidem magnam fugiat iste, dolorum quod quibusdam delectus, laboriosam sint libero possimus.</p>
<button>Book a table</button>
</div>
<img class="hero-image" src="/images/hero.png" alt="Plato de pasta con vegetales">
</section>
</main>
</body>
</html>
styles.css
*{
margin: 0;
padding: 0;
font-size: 62.5%;
font-family: 'Roboto', sans-serif;
}
main{
max-width: 1200px;
min-width: 300px;
width: 80%;
margin: 20px auto;
}
.hero{
display: grid;
grid-template-rows: 1fr 1fr;
justify-items: center;
}
.hero-info{
width: 90%;
display: grid;
align-self: center;
justify-items: center;
justify-content: center;
}
.hero-info h1{
font-size: 3rem;
font-weight: bold;
line-height: 3.4rem;
color: rgb(233, 65, 14);
}
.hero-info p{
margin-top: 15px;
font-size: 1.4rem;
line-height: 1.6rem;
font-weight: 300;
}
.hero-info button{
width: 150px;
height: 30px;
margin-top: 15px;
border-radius: 10px;
background-color: rgb(255, 155, 124);
border: none;
box-shadow: 2px 2px 2px 1px rgb(156, 147, 144);
font-size: 1.6rem;
font-weight: bold;
color: rgb(92, 94, 95);
}
.hero-image{
width: 100%;
height: 100%;
object-fit: contain;
}
ipad.css:
.hero{
display: grid;
grid-template-columns: 2fr 3fr;
grid-auto-rows: 400px;
}
.hero-info h1{
font-size: 4rem;
line-height: 4.2rem;
}
.hero-info p{
font-size: 1.6rem;
line-height: 1.8rem;
}
project’s hero
![](
HTML
<code>
<!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>Proyect</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<section class="hero">
<div class="hero-info">
<h1>Check The</br> Best Food</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat quasi, cumque illum sapiente architecto veritatis omnis recusandae magnam vel explicabo, aut culpa adipisci aspernatur perspiciatis odit illo dolore voluptatem beatae? </p>
<button> <span> book a table --></span> </button>
</div>
<img class="hero-img" src="./images/hero.png" alt="Plato de pasta, salsa y vegetales">
</section>
</main>
</body>
</html>
CSS
<code>
*{
font-family: 'roboto', sans-serif;
}
main{
max-width: 1200px;
margin: 0 auto;
}
.hero{
display: grid;
grid-template-columns: 2fr 3fr;
grid-auto-rows: 400px;
}
.hero .hero-img{
width: 100%;
height: 100%;
object-fit: contain;
}
.hero .hero-info{
align-self: center;
}
.hero .hero-info h1{
font-size: 52px;
-webkit-text-stroke: 2px #648486;
}
.hero .hero-info h1{
font-size: 52px;
-webkit-text-stroke: 2px #648486;
}
.hero .hero-info p{
font-size: 10px;
font-style: oblique;
font-weight: 600;
}
.hero .hero-info button{
width: 150px;
height: 30px;
border: 3px solid #f2bc94;
border-radius: 50px;
text-align: center;
cursor: pointer;
color: white;
background-color: #f27520;
margin-top: 30px;
}
Me encanta este curso y lo bien y simple que explica Estefany.
No me creo que esté entendiendo el funcionamiento de grid, he pasado igual 5 cursos de css y no lo entendía, estaba super frustrado con mover los elementos de CSS3, de verdad, mil gracias!
html {
font-size: 62.5%;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto' , sans-serif;
}
.main {
max-width: 120rem;
margin: 0 auto;
}
.header-container {
display: grid;
grid-template-columns: 2fr 3fr;
max-height: 50rem;
border-bottom: .1rem solid goldenrod;
}
.logo img {
width: 100%;
height: 50rem;
object-fit: contain;
}
.information {
place-self: center;
}
.information h1 {
font-weight: bold;
font-size: 5rem;
margin-bottom: .8rem;
}
.information p {
font-size: 1.6rem;
margin-bottom: 4rem;
}
.primary-button {
padding: 1.2rem .8rem;
border: none;
border-radius: 2rem;
background: #fb8c00;
color: white;
font-size: 1.6rem;
cursor: pointer;
}
<!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">
<link rel="stylesheet" href="Style.css">
<title>Document</title>
</head>
<body>
<div class="main">
<header class="header-container">
<div class="information">
<h1>Check the <br> best food</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione, similique, sequi perspiciatis labore qui culpa quisquam deserunt asperiores eos vel pariatur sed corporis nesciunt? Repellendus, voluptate fugiat. Cupiditate, veritatis nulla voluptas culpa placeat voluptatibus! Error voluptas dolor doloribus perferendis nam.</p>
<button class="primary-button">Book a Table</button>
</div>
<div class="logo">
<img src="/imagenes/hero.png" alt="logo">
</div>
</header>
</div>
</body>
</html>
Me encanta que los profesores compartan esos errores porque a veces esas tonterías nos hacen perder horas buscando el error, ellos ya han pasado por eso y nosotros podemos sufrir para ajustar otras cosas mas, jaja
jaja, nunca había visto a alguien escribir el lorem, hay un atajo lorem*5, te da 5 párrafos, lorem5 te da 5 palabras y asi de acuerdo al numero que le pongas
asi va quedando el mio
Tengo una duda…es mejor poner en el contenedor únicamente: “Display:grid”; cuando se trata de hacer un proyecto responsivo…? Para que, vayamos directamente a las “media queries”, y manejar las columnas y filas que vamos a usar…?
Tengo esa duda…Gracias.
Hasta el momento vamos muy bien con el proyecto!
Me va quedando de la siguiente manera:
.
.
Código HTML
<div class="container">
<header class="hero">
<div class="hero__text">
<h1>Check The <span>Best Food</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum doloribus, perferendis quidem perspiciatis ad nihil labore laudantium.</p>
<a href="#">Book a table</a>
</div>
<div class="hero__image">
<img src="./images/hero.png" alt="Plate of spaghetti">
</div>
</header>
</div>
.
Código CSS:
html{
font-family: 'Roboto', sans-serif;
}
.container{
max-width: 1200px;
margin: 0 auto;
}
.hero{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 400px;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.hero__text{
align-self: center;
}
.hero__text h1{
color: #1b4332;
line-height: 35px;
}
.hero__text h1 span{
display: block;
}
.hero__text p{
margin-block-end: 30px;
}
.hero__text a{
background-color: #f3722c;
border-radius: 30px;
color: white;
padding-inline: 30px;
padding-block: 5px;
text-decoration: none;
}
.hero__text a:hover{
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.hero__image img{
object-fit: contain;
width: 100%;
height: 100%;
}
.
Repositorio de GitHub: https://github.com/iJCode1/CSS_Grid_Basico-Platzi/tree/main/proyecto
Aww bastante facil trabajar con Grid 😮
Hola amigos de Platzi!
Aquí les dejo el link de las imágenes para que puedan usarlo como link externo, si asi lo gustan.
dish1
https://i.postimg.cc/qR0pRyfB/dish1.png
dish2
https://i.postimg.cc/Wp5sNd5j/dish2.png
dish3
https://i.postimg.cc/hPwgmHF5/dish3.png
dish4
https://i.postimg.cc/MG08hHnC/dish4.png
hero
https://i.postimg.cc/zD21m9fG/hero.png
plate1
https://i.postimg.cc/15g1yJgc/plate1.png
plate2
https://i.postimg.cc/cH1P2my3/plate2.png
plate3
https://i.postimg.cc/rs3bd2dG/plate3.png
plate4
https://i.postimg.cc/Fsk8MzqT/plate4.png
plate5
https://i.postimg.cc/rw63Mc2M/plate5.png
video
https://i.postimg.cc/k5qHRc5H/video.png
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?