¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto

Hola!! Con este curso y el definitivo de HTML y CSS (que lo recomiendo) hice para practicar un portfolio, obviamente me faltan proyectos para agregar, porque aun no tengo ninguno, y me faltan algunas funcionalidades que se las agregar con JS cuando lo aprenda. Les agradeceria que lo vean y me tiren algunas criticas constructivas o tips, aca les dejo el link, desde ya muchas gracias compañeros. Nunca paren de aprender
https://juanikitro.github.io/Curso-grid/

Agustin Perez Santiago

Hasta ahorita no a explicado el concepto de:

grid-area
grid-column-start
grid-column-end
grid-row-start
grid-row-end:

Me parece una falta de calidad a este curso casi en todo el curso hasta ahorita tuve que aprenderme por afuera, como funcionaba cada propiedad que conlleva el grid

Pesimo el curso.

christianlatorre

este curso es perfecto, no tiene errores, se cuidaron los detalles, es bonito, estructurado, objetivo, y claro, y la profe genial

Albert K. Camargo Barreda

Hay una versión de firefox que permite ver las grillas a detalle, se llama “Firefox Browser Developer Edition” es de mucha ayuda.

Ivan Daniel Cuevas

Este es el diseño que realice, vamos a ver como me va!💪🚀

Irving Juárez

Yo pensé que las paginas con diseño Grid tenían que ser todo con grid (y puede que haya algunas que sean así), pero otras solo usan el grid para ciertas partes especificas de la pagina web. Por ejemplo esta pagina solo usa el grid para ciertas secciones. https://slack.com/intl/es-mx/

Sebastian Heredia

Fondo de background

background-image: linear-gradient(to top, #9996cb, #ab99cc, #bb9cdb, #caa1cc);

Paolo Joaquin Pinto Perez

Nunca esta de más otro sitio de Gradient:
https://cssgradient.io/

Jose Luis Barbosa Cepeda

Yo tomare este diseño que intente hacer sobre converse 😄, le dije a mi novia que me dijera algo random para practicar html y css y lo primero que dijo fue converse jaja asi que de eso creo que seria bien intentar hacerlo con grid y evitarme algunos problemas que me estaba provocando, es un diseño sencillo pero soy nuevo en esto xd

Yoshirys de Jesús Salas Corona

Este fue mi diseño, sobre las 7 maravillas del mundo, y usando algo un hover sencillo para mostrar el texto de el nombre y lugar.

Patricio Manuel Ugarte

Mi bosquejo:

Así me quedó la grilla principal:

Comparto el ejemplo en CodePen por si a alguien le sirve:
https://codepen.io/patugarte/pen/yLMoBgG

Marco Espinosa López

Les quiero compartir un video, donde explica de manera muy clara, como podemos utilizar el “grid-template-areas” y hacerlo RESPOSIVE, de manera muy sencilla: https://youtu.be/T4t00Hd3qZc

Rouseld Bayardo Castilblanco Gonzalez

Asi quedo mi diseño ya plasmado en codigo

Captura de pantalla 2022-01-06 141856.png

Aqui abajo dejo el codigo utilizado

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" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://use.typekit.net/qjf0hqw.css">
    <link rel="stylesheet" href="https://use.typekit.net/qjf0hqw.css">
    <title>Document</title>
</head>
<body>
    <section class="principal__section">
        <div class="principal__section__menu">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Artists</li>
                <li>Contact Us</li>
            </ul>
        </div>
        <div class="principal__section__content">
            <h2>BEST</h2>
            <div class="principal__section__content--title2container">
                <img src="./Trazado 5.png" alt=""><h2 class="principal__section__content--title2">RAP</h2>
            </div>
            <h2>ARTISTS</h2>
            <div class="principal__section__content--textcontainer">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been .</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been .</p>
            </div>
        </div>
        <div class="principal__section__img">
            <figure>
                <img class="principal__section__img--img" src="./Tyler.png" alt="">
            </figure>
        </div>
    </section>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}


:root{
    --primarycolor: #E2294F;
    --secondarycolor: white;
    --bgcolor: #26124A;
    --principalfont: 'Cy', sans-serif;
    --secondaryfont: 'scandia-line-web', sans-serif;
    --fontS: 1.4rem;
    --fontM: 2.0rem;
    --fontL: 2.4rem;
    --fontXL: 9.0rem;
}

html{
    font-size: 62.5%;
    background-image: url(./BGIMG.png);
    background-blend-mode: multiply;
    background-color: var(--bgcolor);
}

.principal__section{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas: 
    "navbar content img"
    "navbar content img"
    "navbar content img"
    "navbar content img"
    "navbar content img";
    height: 100vh;
    width: 100vw;
    align-items: center;
    overflow: hidden;
}

.principal__section__menu{
    grid-area: navbar;
    color:var(--primarycolor);
    font-family: var(--principalfont);
    font-size: var(--fontL);
    transform: rotate(270deg);
    width: 315px;
}

.principal__section__menu ul{
    display: flex;
    width: 446px;
    gap: 37px;
    list-style: none;
    cursor: pointer;
    margin-top: -70px;
}

.principal__section__content{
    grid-area: content;
}

.principal__section__content h2{
    font-family: var(--principalfont);
    font-size: var(--fontXL);
    font-weight: 500;
    color: var(--primarycolor);
}

.principal__section__content--title2{
    color: var(--secondarycolor) !important;
}

.principal__section__content--title2container{
    display:flex
}

.principal__section__content--textcontainer{
    display:flex;
    flex-direction: row;
    gap: 20px;
    color: var(--secondarycolor);
    font-family: var(--secondaryfont);
    font-size: var(--fontS);
    font-weight: 100;
    width: 100%;
    padding-top: 120px;
}

.principal__section__content--textcontainer p{
    border-top: var(--primarycolor) solid 2px;
    padding-top: 15px;
}

.principal__section__img{
    grid-area: img;
}

Giovanni Salas Hernández

Mi proyecto

Alvaro Joel Ticona Motta

Holaa, en la parte de agregar la fuente en nuestro proyecto Diego en el curso definitivo de HTML y CSS dice que no es buena practica usar el import en el css porque pega el performance, es una mejor práctica usar la etiqueta link en el header del html

Javier Marin

Bueno, vengo a aportarles mi partecita de como resolví el proyecto (a nivel teórico, la solución la deben encontrar ustedes jiji).

Realmente me costó al principio abstraer todo a un grid pero con un programa de diseño pude armarme rápido una grid precisa y seccionar todo con cuadrados:

Una vez que logras imaginarte el grid y vas posicionando todo en celdas, dejando de pensar tanto en el contenido sino en el espacio que ocupan, ya estás.

Ahora bien, el siguiente paso es la abstracción en el código. A mi me sirvió mucho imaginar el trabajo en algo así como capas o también como pasos. Obviamente el primer paso es definir el grid inicial, pero luego necesitas visualizarlo y con las herramientas de desarrollador es bastante simple.

Paso 1, pensar en simples bloques y como ubicarlos, da igual el contenido:

Necesitas ver donde van a estar las cosas, como se solapan.

Paso 2. Pensar en contenido, pero no en posicionamiento o estética.

Necesitas ver que irá en cada lugar, no como irá.

Paso 3. Empieza a posicionar cada elemento en lo que crees que será su aspecto final. También es momento de quitar las capas de bloques

Ahora si, empieza a experimentar y a visualizar el resultado final.

Paso 5. Presenta la propuesta, observala, vuelve atrás si necesitas.

Resultado:

Deyvis Neyser Valdez Gavilan

Hola, les comparto la grid principal del proyecto:
.
resultado:

.
.
Código:

<!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>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

        :root {
            --blue: #81ccf1;
            --yellow: #efc66a;
            --pink: #d8a6cb;
            --dark-pink: #c59ece;
            --purple: #9996cb;
            --magenta: #f665b1;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-image: linear-gradient(to top, #9996cb, #ab99cc, #bb9dcd, #caa1cc, #d8a6cb);
            margin: 0;
            height: 100vh;
        }

        .container {
            display: grid;
            grid-template: repeat(10, 1fr) / repeat(10, 1fr);
            height: 100vh;
        }

        .yellow {
            grid-column: 1 / 2;
            grid-row: 5 / 7;
            background-color: var(--yellow);
        }

        .yellow2 {
            grid-row-start: 9;
            grid-row-end: 10;
            background-color: var(--yellow);
        }

        .blue {
            grid-column-start: 1;
            grid-column-end: 4;
            grid-row-start: 7;
            grid-row-end: 9;
            background-color: var(--blue);
        }

        .magenta {
            grid-column: 3 / 4;
            grid-row: 3 / 4;
            background-color: var(--magenta);
            position: relative;
        }

        .magenta p {
            position: absolute;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: 30px;
            margin: 0;
            bottom: 50px;
            right: 0;
        }


        .magenta2 {
            grid-column: 5 / 8;
            grid-row: 6 / 11;
            background-color: var(--magenta);
            position: relative;
        }

        .magenta2 p {
            position: absolute;
            margin-top: 0;
            bottom: 0;
            font-size: 40px;
            font-weight: bold;
        }

        .magenta-border {
            grid-column: 6 / 9;
            grid-row: 5 / 8;
            border: 6px solid var(--magenta);
        }

        .magenta-border2 {
            grid-column: 7 / 10;
            grid-row: 3 / 9;
            border: 6px solid var(--magenta);
            position: relative;
        }

        .magenta-border2 p {
            position: absolute;
            font-size: 60px;
            margin: 0;
            top: 50px;
            left: -89px;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="yellow"></div>
        <div class="yellow2"></div>
        <div class="blue"></div>
        <div class="magenta">
            <p>Deyvisnvg</p>
        </div>
        <div class="magenta2">
            <p>@Deyvisnvg</p>
        </div>
        <div class="magenta-border"></div>
        <div class="magenta-border2">
            <p>CSS GRID</p>
        </div>
    </div>
</body>

</html>

JUAN CAMILO CAMPO TANGARIFE

Este es el diseño que realicé… ahora va a ser un verdadero reto realizar este proyecto.

Recursos

Jeremy Medina

Ahora solo queda pasarlo a Código!
https://www.notion.so/Grid-Layout-Proyecto-40df7551a3824a70b03feda795d62c8d

Aldo César Rico Mejía

Reto finalizado:

<code>  HTML
<div class="container">
  <div class="yellow"></div>
  <div class="yellow2"></div>
  <div class="blue"></div>
  <div class="magenta"></div>
  <div class="magenta2"></div>
  <div class="magenta__border">
    <p>Hecho por ArudoR</p>
  </div>
  <div class="magenta__border2">
    <p>CSS Grid</p>
  </div>
  
</div>

<code> CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

:root {
  --blue: #81ccf1;
  --yellow: #efc66a;
  --pink: #d8a6cb;
  --dark-pink: #c59ece;
  --purple: #9996cb;
}

body {
  font-family: 'Roboto', sans-serif;
  background-image: linear-gradient(to top, #9996cb, #ab99cc, #bb9dcd, #caa1cc, #d8a6cb);
  margin: 0;
  height: 100vh;
}

.container {
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
  height: 100vh;
}

.yellow{
  grid-column: 1 / 2;
  grid-row: 5 / 7;
  background-color: var(--yellow);
}

.yellow2{
  grid-column: 1 / 2;
  grid-row: 9 / 10;
  background-color: var(--yellow);
}

.blue{
  grid-column: 1 / 4;
  grid-row: 7 / 9;
  background-color: var(--blue);
}

.magenta{
  grid-column: 3 / 4; 
  grid-row: 3 / 4; 
  background-color: purple;
}

.magenta2{
  grid-column: 5 / 8;
  grid-row: 6 / 11;
  background-color: purple;
}

.magenta__border{
  grid-column: 6 / 9;
  grid-row: 5 / 8;
  border: 6px solid var(--pink);
  position: relative;
}

.magenta__border2{
  grid-column: 7 / 10;
  grid-row: 3 / 9;
  border: 6px solid var(--pink);
  position: relative;
}

.magenta__border p{
  position: absolute;
  font-size: 30px;
  margin: 0;
  top: 10px;
  left: 100px;
}

.magenta__border2 p{
  position: absolute;
  font-size: 40px;
  margin: 0;
  top: 50px;
  left: -89px;
}

Maided Guadalupe Hernández Ponce

👀

Miguel Ángel Reyes Moreno

Estuve jugando un poco, hice algo sencillo:

Ultisaer Revternae

Carlos Iván Cortés Cruz

https://codepen.io/CarlosCortes2020/pen/poxyZxY

Jose Angel Esquivel Cisneros

Angel David Contreras Barrios

Me gusta este curso, esta genial!!

Rubén Pasos

una joya esa pagina de gradient

Daniel De la Garza Cordero

Reto resuelto

Javier Andres Laverde Pico

Por fin llegamos a lo bueno!

Giselly Romero Nuñez

Recuerda que el Inspector es nuestro mejor Amigo 😄

Yeins David Llano Hernández

al principio tenia conflicto conmigo mismo, pero es entender que es una forma alternativa de hacer las cosas, adecuado o no, depende, pero simplemente es una forma diferente.

SebasPosada

Good class. I adore your voice because it transmits security with the topic, but at the same time serenity. 😉

Angel David Osorio Leyva

Genial, ahí vamos.

Eduardo Reyes

Yo voy a seguir el modelo de la profesora, tenia un diseño pero me di cuenta que para hacerlo en Grid tendría que ubicar todo de nuevo y hacer cálculos. Entonces terminaré este y luego hare el mio usando Grid y Flex dependiendo de donde sea necesario.

Luis Alejandro Vera Hernandez

<!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>Fase de construccion de la grid principal </title>
</head>
<style>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

:root {
  --blue: #81ccf1;
  --yellow: #efc66a;
  --pink: #d8a6cb;
  --dark-pink: #c59ece;
  --purple: #9996cb;
}

body {
  font-family: 'Roboto', sans-serif;
  background-image: linear-gradient(to top, #9996cb, #ab99cc, #bb9dcd, #caa1cc, #d8a6cb);
  margin: 0;
  height: 100vh;
}

.container {
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
  height: 100vh;
}

</style>
<body>
    <div class="container">

    </div>
</body>
</html>

Yasmil Gonzalez

hace 4 meses

Para los que no saben mostrar las lineas de la cuadricula en el navegador de codepen como yo, basta con llamar al inspector seleccionar el contenedor que tiene la grilla, buscar donde esta estilos del inspector y activar visualizacion de las lineas de la grid ![](https://static.platzi.com/media/user_upload/clase22-2e17723e-3f5e-4aec-8c3d-b046201074cb.jpg)

David Limon

hace 4 meses

Reto terminado... ![](https://static.platzi.com/media/user_upload/image-fa1c3c6a-f242-4f88-99d1-4f6515dcda0c.jpg)

Juan Camilo Lentino Villalba

hace un año

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
    <div class="item5"></div>
    <div class="item6"></div>
    <div class="item7"></div>
    <div class="item8">CSS GRID</div>
</div>

.container {
    height: 100vh;
    display: grid;
    grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}


.item1 {
    background-color: pink;
    grid-area: 3 / 3 / 4 / 4;
}

.item2 {
    background-color: yellow;
    grid-area: 5 / 1 / 7 / 2;
}

.item3 {
    background-color: aquamarine;
    grid-area: 7 / 1 / 9 / 4;
}

.item4 {
    background-color: yellow;
    grid-area: 9 / 1 / 10 / 2;
}

.item5 {
    background-color: pink;
    grid-area: 6 / 5 / 11 / 8;
}

.item6 {
    background-color: transparent;
    border: 2px solid pink;
    grid-area: 5 / 6 / 8 / 9; 
}

.item7 {
    background-color: transparent;
    border: 2px solid pink;
    grid-area: 3 / 7 / 9 / 10;
}

.item8 {
    grid-area: 3 / 6 / 5 / 9;
    font-size: 2.4rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

Oscar David Rodríguez manjarres

hace un año

Hola aquí mi versión (me base en una version de un compañero

Codigo en html

<
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proyect</title>
    <link rel="stylesheet" href="./project.css">
</head>
<body>
    <div class="jinx-container">
      <div class="one">
          <div class="one-1"></div>
          <div class="one-1"></div>
          <div class="one-1"></div>
      </div>

      <div class="two">
        <div class="two-ball">

        </div>
      </div>

      
        <div class="tree">
            <div class="tree-1"></div>
            <div class="tree-1"></div>
            <div class="tree-1"></div>
        </div>

         <div class="four"></div>
         <div class="five"></div>
         <div class="seis">
            <div class="six"></div>
         </div>

         <img src="./asssets/jinx.png" alt="">

    </div>
</body>
</html>
>

CSS

<
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.jinx-container{
    margin: 0 auto;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(22, 40px);
    grid-template-rows: repeat(17,40px);
    object-fit: contain;
}
.one{
    grid-area: 2/16/3/21;
   /* border: 1px solid #1770a6; */
   border-radius: 10px;
   display: flex;
   padding: 0 2rem;
}
.one .one-1
{
    background-color: #b15aaa;
    width: 20px;
    height: 20px;
    margin-right: 6px;
}
.two{
    grid-area: 4/16/7/23;
    border-radius: 10px;
    display: flex;
    
 }
 .two .two-ball{
    background-color: #1770a6;
    border-radius: 50%;
    width: 80px;
    height: 80px;
 }

 .tree{
    grid-area: 7/17/9/18;
    /* border: 1px solid #1770a6; */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tree .tree-1
{
    background-color: #b15aaa;
    width: 20px;
    height: 20px;
    margin-bottom: 6px;
}
.four{
    grid-area: 9/10/18/17;
    border:3px solid #635e8f;
    z-index: 11;
}
.five{
    grid-area: 5/3/12/14;
    border:3px solid #504c76;}
    .six{
        height: 30px;
    
    background-color: #12131a;
    }
    .seis{
        display: flex;
        grid-area: 4/7/6/11;
        flex-direction: column;
        justify-content: center;
    }

    img{
        width: 340px;
        object-fit: cover;
        grid-area: 6/7/6/11;
        z-index: 12;
    }

>

Un saludo

Raymondi Alejandro Ramos Vásquez

cuando hago gradientes siempre tengo que poner el background attachment, si no lo hago no funciona 😦

Oscar Alexánder Ortiz Beltrán

Manos al código:

Gustavo Liendo

Cree un diseño y lo animé un poco.

yovanya

Fue algo del avance

Facundo Esteban Gasco