Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

驴De d贸nde venimos y en d贸nde estamos?

2

驴C贸mo fue pensado CSS cuando se cre贸?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

驴C贸mo se lleg贸 al concepto de CSS Grid?

5

驴CSS Grid es una idea nueva? La evoluci贸n de la especificaci贸n

6

驴Qu茅 significa Grid para CSS?

Control de alineamiento

7

T茅cnicas de alineamiento antes de CSS Grid: margin y line-height

8

T茅cnicas de alineamiento antes de CSS Grid: table-cell y positions

9

T茅cnicas de alineamiento antes de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades f铆sicas y l贸gicas en CSS + Quiz

12

T茅cnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Qu铆z

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

隆Iniciemos nuestro proyecto! Fase de creatividad e identificaci贸n de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: 驴display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generaci贸n autom谩tica de tracks + Qu铆z

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

隆Manos al c贸digo! Fase de construcci贸n de la grid principal de nuestro proyecto

23

Ubicaci贸n + Reto

24

Alineamiento en los elementos hijos + Quiz

25

隆Manos al c贸digo! Fase de ubicaci贸n y alineamiento

26

Continuando con la fase de ubicaci贸n y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Contin煤a con el Curso de Dise帽o Web con CSS Grid y Flexbox

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Continuando con la fase de ubicaci贸n y alineamiento

26/28
Recursos

Aportes 155

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

MI tema fue perspectiva.

El camino es una grilla con perspectiva 3d 馃槂

Quise hacer un pixel art y este fue el resultado:

Comparto mi pr谩ctica. Que buen curso 馃挌

No qued贸 como quer铆a pero igual aprend铆 bastante. Tema: dise帽o conceptual casa Gabo.

No soy muy bueno con esto del dise帽o, pero鈥 pues este es el m铆o xD Necesito aprender a dise帽ar cosas bonitas jajaja
.

Les comparto mi proyecto, hice algo muy simple.
Dejo el enlace a la pagina y el repositorio en Github por si quieren ver el c贸digo.

Repositorio
Pagina

Pues as铆 qued贸 el proyecto:

![](

Tuve problemas con los bordes, pero fue lo mejor que pude hacer por el momento.
Gran curso!

les comparto lo que hice, quise hacer algo distinto antes de realizar mi proyecto.

Ac谩 les dejo con mi proyecto (en imagen porque a煤n no es responsive y porque apenas es el 鈥渉ero鈥 de todo mi portfolio 馃槄)

El curso ha estado bien, pero siento que qued茅 como a medias 鈽 en la clase de 鈥淔ase de creatividad鈥 me emocion茅 y pens茅 que nos iba a gu铆ar a un proyecto m谩s grande. Entiendo que obviamente parte de nosotros ya hacer cosas m谩s complicadas pero no me lo esperaba as铆.

Me habr铆a gustado adem谩s ver como aprender a usar Grid desde una perspectiva 鈥渕obile first鈥, siendo que es ahora lo est谩ndar, pero en fin鈥 Como curso de Fundamentos de CSS Grid ha estado cool!

Me inspire en un dise帽o que vi en Pinterest y as铆 me quedo

Excelente display grid

He terminado, fue interesante porque antes de este curso, pensaba que sabia usar grid
Y solo era una peque帽a parte que conoc铆a, ahora tengo mejor base como para usar esta gran herramienta a un muy buen nivel

Este es mi Github

Me sali贸 a un 96% del modelo inicial, cambie unas partes porque no me convenc铆an del todo.

Pr贸ximamente subir茅 su versi贸n moblie

Gracias Teff!!!

Les comparto mis dos ejercicios que hice gracias a este gran curso. Recibo feedback de ustedes para mejorar 馃槃

Mi dise帽o es similar al de la platzi conf del a帽o pasado

Les comparto mi dise帽o terminado. Mi tema fue m煤sica:

Por aqu铆 mi resultado y con muchas ganas de seguir aprendiendo! Me sirvi贸 mucho este curso 馃槂

Buscando alternativas para llegar al resultado q quer铆a, encontr茅 un super referente de quien quiero seguir aprendiendo: Jen Simmons https://labs.jensimmons.com/

Este fue uno de los resultados de mi proyecto.

Practicar y practicar para seguir mejorando 馃槃

Este es mi dise帽o, lo voy a utilizar para hacer mi blog personal de m煤sica pr贸ximamente :3

Les comparto mi dise帽o.

Les comparto mi ejercicio. 馃槂

Vamos al siguiente curso.

Bien

Tal vez muy sencillo pero es el primero que maqueto de esta forma 馃槃

As铆 qued贸 mi proyecto

Proyecto terminado 馃槃

Usando CSS GRID y ayuda con Flexbox tambi茅n y algo de conocimientos de dise帽o.

Recursos usados

Dise帽o en Photoshop

:root{
    --color-1:#F23D5E;
    --color-2:#F285A2;
    --color-3:#469CA6;
    --color-4:#04BF9D;
    --color-5:#F20505;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
    font-family: 'Roboto Condensed', sans-serif;
}
main{
    width: 100%;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;
}
main section{
    display: grid;
    grid-template-columns: repeat(10, 40px);
    grid-template-rows: repeat(14, 40px);
    gap: 3px;
}
.box-color-1{
    background-color: var(--color-4);
}
.box-color-2{
    background-color: var(--color-2);
}
.box-color-3{
    background-color: var(--color-1);
}
.box-small-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.box-small{
    width: 25px;
    height: 25px;
}
.box-1{
    grid-column: 7 / 8;
}
.box-2{
    grid-column: 6 / 7;
}
.box-2 div{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.box-3{
    grid-column: 7 / 8;
    grid-row: 2 / 3;
}
.box-4{
    grid-column: 8 / 9;
    grid-row: 2 / 3;
}
.box-5{
    grid-column: 7 / 8;
    grid-row: 3 / 4;
}
.box-6{
    grid-column: 8 / 9;
    grid-row: 3 / 4;
}
.box-7{
    grid-column: 6 / 7;
    grid-row: 3 / 4;
}
.box-8{
    grid-column: 10 / 12;
    grid-row: 9 / 10;
}
.box-9{
    grid-column: 8 / 9;
    grid-row: 11 / 12;
}
.box-10{
    grid-column: 2 / 4;
    grid-row: 9/11;
}
.box-11{
    grid-column: 1 / 2;
    grid-row: 8 / 9;
}
.box-12{
    grid-column: 2 / 3;
    grid-row: 8 / 9;
}
.box-13{
    grid-column: 2 / 3;
    grid-row: 7 / 8;
    justify-content: end;
}
.box-13 div{
    grid-column: 2/3;
    grid-row: 2/3;
}
.box-14{
    grid-column: 8 / 9;
    grid-row: 12 / 13;
    justify-content: end;
}
.box-14 div{
    grid-column: 1/2;
}
.box-15{
    grid-column: 3 / 4;
    grid-row: 11 / 12;
    justify-content: end;
}
.box-15 div{
    grid-column: 2/3;
}
.box-16{
    grid-column: 4 / 6;
    grid-row: 13 / 15;
}
.image-1{
    background-color: #F20505;
    grid-column: 6 / 12;
    grid-row: 4 / 9;
    background-position: top 0px left -200px;
    background-size: 600px;
}
.image-2{
    background-color: #F20505;
    grid-column: 8 / 10;
    grid-row: 9 / 11;
    background-size: 600px;
    background-position: bottom -111px left -285px;
}
.image-3{
    background-color: #F20505;
    grid-column: 4 / 8;
    grid-row: 9 / 13;
    background-size: 600px;
    background-position: bottom -27px left -120px;
}
.image-4{
    background-color: #F20505;
    grid-column: 3 / 6;
    grid-row: 6 / 9;
    background-size: 600px;
    background-position: bottom -188px left -76px;
}
.background{
    background-image: url("pexels-erik-mclean-7360387.jpg");
    background-repeat: no-repeat;
}
.frase{
    grid-column: 1 / 6;
    grid-row: 3/5;
    color: #F23D5E;
    font-size: 3rem;
    font-weight: bold;
    text-align: end;
}
.autor{
    grid-column: 1 / 6;
    grid-row: 5/6;
    align-self: end;
    font-size: 1.6rem;
    text-align: end;
} 

Mi aporte.

Publiqu茅 mi proyecto usando GitHub Pages:
https://patugarte.github.io/cinnema-magazine/

As铆 qued贸 馃槃

El sistema de grillas:

Dejo tambi茅n el repositorio de GitHub por si alguien quiere mirar el c贸digo.

Tema: Calamardo

No se cual es la pol铆tica de Platzi sobre publicar enlaces de libros en comentarios, lo digo por posible violaciones a derechos de autor鈥i se puede me lo hacen saber para compartir un par de libros muy 煤tiles para practicar layouts con css grid

C贸digo
El c贸digo aun lo voy a mejorar para quitar malas pr谩cticas y hacerlo m谩s limpio.

Aqui me proyecto final :

Este fue mi proyecto final:

Siempre me han gustado los espacios que contengan algo de naturaleza, esa fue mi inspiraci贸n.

Resultado:

Grilla:

amigos, le puse una frase que me gusta.

Hola a todos, ac谩 est谩 mi reto personal usando Grid:

Comparto mi reto

Mi proyecto fue hacer una especie de mood board basado en matcha 馃槂

Tambi茅n dejo por aqu铆 el link al repositorio de github:
https://github.com/JAlvarezV94/matcha-grid

Comparto mi proyecto, fue un buen curso 馃槂

Aqu铆 mi trabajo final, el ejemplo lo saqu茅 de esta p谩gina
![](

uff un gusto trabajar con grid, pero a mi m谩quina de creatividad le cuesta seguirle el paso, y ya no da para hacer la seccion de projectos por ahora, a煤n as铆 me gust贸

Intent茅 hacer el dise帽o que cree en figma, y me acerqu茅 mucho al resultado 馃槂

Mi dise帽o:

Dejo por aqu铆 mi proyecto 馃挌

En general he aprendido mucho, de paso poner en practica muchos conceptos, mi humilde resultado:

No es muy lindo (mi fuerte no es el dise帽o), pero bueno, lo importante es aprender y pr谩cticar

https://codepen.io/Londrack/pen/oNZZrxa

Aca mi aporte

Que cosa tan hermosa hemos logrado clase a clase Estefy 馃挏
Me ha gustado mucho el resultado y sobretodo lo que hemos estado aprendiendo.

Comparto el c贸digo en CodePen: https://codepen.io/ijcode1/pen/NWpJRKM

Buenas, este es mi intento de ser un front siendo back jaja, siempre tuve la mente cerrada hacia CSS, hasta que me decid铆 aprenderlo, a煤n me falta detalles que pulir, pero todo se puede lograr con pr谩ctica y dedicaci贸n.
PD: tambi茅n necesito clases de dise帽o, por si alguien recomiende alguno, gracias!

Hice algo un poco diferente espero les guste

Les comparto mi resultado, fue acerca de las maravillas del mundo, usando un hover para descubr铆 el texto.

Mi pr谩ctica

por lo pronto realice el mismo proyecto del curso

Comparto p谩gina para crear cualquier figura geometrica que desees.
Se utiliza la propiedad de clip-path 馃憤
https://bennettfeely.com/clippy/

Listo y responsivo
Repositorio:
https://grettsam.github.io/CSSGridLayout/

As铆 quedo mi proyecto, lo 煤nico que tiene flex son los cuadros grises, no le coloque responsive, porque literal me tocaba rehacer la p谩gina 馃槄.
-La p谩gina se ve bien de 700px en adelante.


ghPages: https://crisleoco2004.github.io/WebGrid/

Mi tarea. Se alarg贸 el c铆rculo jeje

Este fue mi resultado 馃槂

Mi proyecto fue con la tem谩tica de mi series favoritas :3

Les comparto mi proyecto 馃榿

Aqui les dejo mi reto

Con esta clase, mejor茅 un poco lo que estaba haciendo de mi proyecto, y aunque sigue sin gustarme el resultado final, pero no por el tema de del udo e implementaci贸n de css-grid, sino porque hasta ahorita, veo que como dise帽ador no doy una, pero ya seguir茅 practicando.

<body>
    <div class="container">
        <div class="second-background"></div>
        <div class="imagen-ilustrativa">
            <img src="./assets/img/web_ilustration.jpg" alt="">
        </div>
        <div class="profile-pic">
            <img src="./assets/img/pic-profile.png" alt="profile-pic">
        </div>
        <div class="titulo-principal">
            <h1 >harngalf</h1>
        </div>        
        <div class="about-me"> 
            <img src="" alt="">
            <h2>About me...</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus nisi ipsum labore consectetur quae suscipit sed doloribus quod. Nobis qui fuga illum quibusdam sequi dolorem exercitationem saepe pariatur magnam explicabo. </p>
        </div>
        <div class="cards-container">
            <div class="card-uno">
                <img src="" alt="">
                <h2>Titulo</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias adipisci pariatur enim mollitia repudiandae maiores ratione eligendi porro eos. Ipsa, hic rem eveniet tenetur ipsam animi eos ipsum tempore a.</p>
            </div>
            <div class="card-dos">
                <img src="" alt="">
                <h2>Titulo</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente praesentium rem, possimus repellat provident iste itaque ipsam mollitia modi! Hic nisi exercitationem enim molestias aperiam porro explicabo sapiente quia tempora.</p>
            </div>
            <div class="card-tres">
                <img src="" alt="">
                <h2>Titulo</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente praesentium rem, possimus repellat provident iste itaque ipsam mollitia modi! Hic nisi exercitationem enim molestias aperiam porro explicabo sapiente quia tempora.</p>
            </div>
        </div>        
    </div>
    
</body>
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500;700&display=swap');
/*  font-family: 'Comfortaa', cursive;  */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500;700&family=Source+Code+Pro:wght@200;300;400;500;700&display=swap');
/*   font-family: 'Comfortaa', cursive;
font-family: 'Source Code Pro', monospace;   */
* {
    margin: 0;
    padding: 0;
}

:root {
    --dark-gray: #84888c;
    --light-gray: #babcbf;
    --very-light-gray: #f2f2f2;
    --navy: #161853;
    --blue: #292C6D;
    --intense-liht-blue: #164df2;
    --light-blue: #486cd9;
    --gray-blue: #5a73bf;
    --ligth-green-blue: #3df2e0;
    --very-light-blue: #f8fcff; 
    --ligh-pink: #FAEDF0;
    --dark-pink: #EC255A;
}
body {
    font-family: 'Source Code Pro', monospace;
    background-image: radial-gradient(circle, #f8fcff, #bedbf8, #8bb8f1, #6293e7, #486cd9);
    height: 100vh;    
    margin: 25px;
    
}

.container {
    display: grid;
    grid-template: repeat(10, minmax(50px, 90px)) /  repeat(10, minmax(50px, 1fr));
    
    
}
.second-background {
    grid-area: 2 / 3 / 11 / 10;
    background-color: var(--ligh-pink);
}
.profile-pic img {
    width: 60%;
}
.profile-pic {
    grid-area: 1 / 2 / 3 / 6 ;
    border-radius: 50%;
    
}
.titulo-principal {
    grid-area: 2 / 3 / 2 / 10;
   
    font-size: 50px;
    color: var(--gray-blue);
}
.titulo-principal h1 {
    text-align: end;
}
.imagen-ilustrativa {
    grid-area: 3 / 5 / 7 / 11;
  
}
.imagen-ilustrativa img {
    width: 100%;
}
.about-me {
    grid-area: 3 / 1 / 6 / 5;
    font-size: 12px;
    background-color: var(--very-light-blue);
    border: 4px solid var(--gray-blue);
    align-self: center;
}
.cards-container {
    grid-area: 4 / 1 / 11 / 11;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 20px;
    justify-items: center;
    
}

.card-uno {
    font-size: 12px;
    background-color: var(--very-light-blue);
    border: 4px solid var(--gray-blue);
    align-self: center;
    
}

.card-dos {
    
    font-size: 12px;
    background-color: var(--very-light-blue);
    border: 4px solid var(--gray-blue);
    align-self: center;
}
.card-tres {
    
    font-size: 12px;
    background-color: var(--very-light-blue);
    border: 4px solid var(--gray-blue);
    align-self: center;
}

Hice mi proyecto sobre uno de los deportistas que mas admiro 馃弾

As铆 me va quedando mi pagina:

Realice el hongo de Mario Bros 鈥淭oad鈥.

Espero les agrade.

Codigo - Github


Est谩 genial el dise帽o y como pensando fuera de la caja podemos crear grandes cosas con CSS GRID.

Mi proyecto terminado. Cambie la paleta de colores y un poco la ubicaci贸n del contenido.

Mi aporte 馃挭

As铆 me quedo

Pues cambi茅 de dise帽o como 鈥100 veces鈥 mientras hacia el codigo, al final lo dej茅 asi, fue mas retante de lo que cre铆a, por cierto les recomiendo mucho la trilogia de Bioshock, es una obra de arte!

comparto mi practica CSS Grid https://acamilolopezv.github.io/Css-grid/

Comparto mi proyecto final. La calve de todo es la pr谩ctica y la constancia. ![](file:///I:/DESCARGAS/Proyecto-final_grid.png)![](https://i.postimg.cc/8cnRWVP4/Proyecto-final-grid.png)


Con la Grid 馃槉

(Se descuadra todo el dise帽o si cambio las dimensiones de la pantalla)

RESULTADO

Mi trabajo honesto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MODELO GRID</title>
    <link rel="stylesheet" href="./style.css">
    <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=DM+Sans:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;700&family=Inter:wght@400;500;700&family=Lato:wght@300&family=Open+Sans:wght@300;500;800&family=Roboto:wght@700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
        <div class="item-4"></div>
        <div class="item-5"></div>
        <div class="item-6">
            <p>CSS GRID</p>
        </div>
        <div class="item-7"></div>
        <div class="item-8">
            <p>MarjoryJes</p>
        </div>
    </div>
</body>
</html>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --aqua: #70d6ff;
    --pink: #ff70a6;
    --salmon: #ff9770;
    --melon: #ffd670;
    --yellow: #e9ff70;
}
html {
    font-size: 62.5%;
}
body {
    font-family: 'Roboto', sans-serif;
    background-image: radial-gradient(circle, #e9ff70, #fce361, #ffc85f, #ffae66, #ff9770);
    height: 100vh;
}
.container {
    display: grid;
    grid-template: repeat(10, 1fr) / repeat(10, 1fr);
    height: 95vh;
}
.item-1 {
    background: var(--aqua);
    grid-column:  1 / 2;
    grid-row: 5 / 10;
    border-radius: 15px;
}
.item-2 {
    background: var(--pink);
    grid-column: 1 / 4;
    grid-row: 7 / 9;
    opacity: 50%;
    border-radius: 15px;
}
.item-3 {
    background: var(--melon);
    grid-column: 5 / 8;
    grid-row: 6 / 11;
    border-radius: 15px;
    box-shadow: 3px 5px 8px rgb(17, 16, 16);
}
.item-4 {
    border: 4px solid var(--aqua);
    grid-column: 6 / 9;
    grid-row: 5 / 8;
    border-radius: 15px;
    opacity: 50%;
}
.item-5 {
    border: 4px solid var(--pink);
    grid-column: 7 / 10;
    grid-row: 3 / 9;
    border-radius: 15px;
}
.item-6 {
    font-size: 5rem;
    grid-column: 6 / 9;
    grid-row: 3 / 5;
    display: grid;
    justify-items: end;
    align-items: center;
    color: grey;
}
.item-7 {
    background: var(--yellow);
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    border-radius: 15px;
    box-shadow: rgb(17, 16, 16) 3px 5px 8px;
}
.item-8 {
    font-size: 2rem;
    display: grid;
    grid-column-start: 4;
    grid-row:  2 / 4;
    transform: rotate(180deg);
    writing-mode: vertical-lr;
    justify-items: center;
    align-items: center;
    color:#696969;
}

No hab铆a podido terminar el reto porque no ten铆a un tema en mente, pero tiempo despu茅s lo pude finalizar.
Fue muy divertido hacerlo 馃樃

Usando una paleta de colores tomando referencia de una imagen.

Resultado final del proyecto

Se logr贸 un 90% 馃槂

Les comparto como me qued贸 mi proyecto (Es algo sencillo que vi en pinterest y quise hacerlo web).

Hace algun tiempo otro estudiante lo hizo y quise hacerlo de dos formas diferentes

CSS

:root {
    --red-cloth: #fd0001;
    --hair-shoes: #9b4f00;
    --skin: #fed291;
    --black: #000000;
    --azul: #4c00df;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
main {
    display: flex;
}
.container {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template: repeat(16, 5vh) / repeat(13, 3vw);
    margin-left: 20px;
    margin-top: 20px;
    grid-template-areas: 
        ".   .   .   r1  r1  r1  r1  r1  r1  .   .   .   ."
        ".   .   r2  r2  r2  r2  r2  r2  r2  r2  r2  r2  ."
        ".   .   b1  b1  b1  p1  p1  p1  b11 p2  .   .   ."
        ".   b2  p3  b3  p4  p4  p4  p4  b12 p5  p5  p5  ."
        ".   b4  p6  b5  b5  p7  p7  p7  p7  b13 p8  p8  p8"
        ".   b6  b6  p9  p9  p9  p9  p9  b14 b14 b14 b14 ."
        ".   .   .   p10 p10 p10 p10 p10 p10 p10 p10 .   ."
        ".   .   r3  r3  a1  r4  r4  r4  r4  .   .   .   ."
        ".   r5  r5  r5  a2  r6  r6  a3  r7  r7  r7  .   ."
        "r8  r8  r8  r8  a4  a4  a4  a4  r9  r9  r9  r9  ."
        "p11 p11 r10 a5  y1  a6  a6  y2  a7  r11 p12 p12 ."
        "p13 p13 p13 a8  a8  a8  a8  a8  a8  p14 p14 p14 ."
        "p15 p15 a9  a9  a9  a9  a9  a9  a9  a9  p16 p16 ."
        ".   .   a10 a10 a10 .   .   a11 a11 a11 .   .   ."
        ".   b7  b7  b7  .   .   .   .   b8  b8  b8  .   ."
        "b9  b9  b9  b9  .   .   .   .   b10 b10 b10 b10 .";
}
.r {
    background-color: var(--red-cloth);
}
.s {
    background-color: var(--skin);
}
.br {
    background-color: var(--hair-shoes);
}
.bl {
    background-color: var(--black);
}
.a {
    background-color: var(--azul);
}
.y {
    background-color: #f3ff01;
}
.red01 {
    grid-area: r1;
}
.red02 {
    grid-area: r2;
}
.red03 {
    grid-area: r3;
}
.red04 {
    grid-area: r4;
}
.red05 {
    grid-area: r5;
}
.red06 {
    grid-area: r6;
}
.red07 {
    grid-area: r7;
}
.red08 {
    grid-area: r8;
}
.red09 {
    grid-area: r9;
}
.red10 {
    grid-area: r10;
}
.red11 {
    grid-area: r11;
}
.brown01 {
    grid-area: b1;
}
.brown02 {
    grid-area: b2;
}
.brown03 {
    grid-area: b3;
}
.brown04 {
    grid-area: b4;
}
.brown05 {
    grid-area: b5;
}
.brown06 {
    grid-area: b6;
}
.brown07 {
    grid-area: b7;
}
.brown08 {
    grid-area: b8;
}
.brown09 {
    grid-area: b9;
}
.brown10 {
    grid-area: b10;
}
.skin01 {
    grid-area: p1;
}
.skin02 {
    grid-area: p2;
}
.skin03 {
    grid-area: p3;
}
.skin04 {
    grid-area: p4;
}
.skin05 {
    grid-area: p5;
}
.skin06 {
    grid-area: p6;
}
.skin07 {
    grid-area: p7;
}
.skin08 {
    grid-area: p8;
}
.skin09 {
    grid-area: p9;
}
.skin10 {
    grid-area: p10;
}
.skin11 {
    grid-area: p11;
}
.skin12 {
    grid-area: p12;
}
.skin13 {
    grid-area: p13;
}
.skin14 {
    grid-area: p14;
}
.skin15 {
    grid-area: p15;
}
.skin16 {
    grid-area: p16;
}
.black01 {
    grid-area: b11;
}
.black02 {
    grid-area: b12;
}
.black03 {
    grid-area: b13;
}
.black04 {
    grid-area: b14;
}
.blue01 {
    grid-area: a1;
}
.blue02 {
    grid-area: a2;
}
.blue03 {
    grid-area: a3;
}
.blue04 {
    grid-area: a4;
}
.blue05 {
    grid-area: a5;
}
.blue06 {
    grid-area: a6;
}
.blue07 {
    grid-area: a7;
}
.blue08 {
    grid-area: a8;
}
.blue09 {
    grid-area: a9;
}
.blue10 {
    grid-area: a10;
}
.blue11 {
    grid-area: a11;
}
.yellow01 {
    grid-area: y1;
}
.yellow02 {
    grid-area: y2;
}
.container2 {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template: repeat(16, 5vh) / repeat(13, 3vw);
    margin-left: 20px;
    margin-top: 20px;
}
.red201 {
    grid-column: 4 / 10;
}
.red202 {
    grid-column: 3 / 13;
}
.red203 {
    grid-column: 3 / 5;
    grid-row: 8 / 9;
}
.red204 {
    grid-column: 6 / 10;
    grid-row: 8 / 9;
}
.red205 {
    grid-column: 2 / 5;
    grid-row: 9 / 10;
}
.red206 {
    grid-column: 6 / 8;
    grid-row: 9 / 10;
}
.red207 {
    grid-column: 9 / 12;
    grid-row: 9 / 10;
}
.red208 {
    grid-column: 1 / 5;
    grid-row: 10 / 11;
}
.red209 {
    grid-column: 9 / 13;
    grid-row: 10 / 11;
}
.red210 {
    grid-column: 3 / 4;
    grid-row: 11 / 12;
}
.red211 {
    grid-column: 10 / 11;
    grid-row: 11 / 12;
}
.skin201 {
    grid-column: 6 / 9;
    grid-row: 3 / 4;
}
.skin202 {
    grid-column: 10 / 11;
    grid-row: 3 / 4;
}
.skin203 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}
.skin204 {
    grid-column: 5 / 9;
    grid-row: 4 / 5;
}
.skin205 {
    grid-column: 10 / 13;
    grid-row: 4 / 5;
}
.skin206 {
    grid-column: 3 / 4;
    grid-row: 5 / 6;
}
.skin207 {
    grid-column: 6 / 10;
    grid-row: 5 / 6;
}
.skin208 {
    grid-column: 11 / 14;
    grid-row: 5 / 6;
}
.skin209 {
    grid-column: 4 / 9;
    grid-row: 6 / 7;
}
.skin210 {
    grid-column: 4 / 12;
    grid-row: 7 / 8;
}
.skin211 {
    grid-column: 1 / 3;
    grid-row: 11 / 12;
}
.skin212 {
    grid-column: 11 / 13;
    grid-row: 11 / 12;
}
.skin213 {
    grid-column: 1 / 4;
    grid-row: 12 / 13;
}
.skin214 {
    grid-column: 10 / 13;
    grid-row: 12 / 13;
}
.skin215 {
    grid-column: 1 / 3;
    grid-row: 13 / 14;
}
.skin216 {
    grid-column: 11 / 13;
    grid-row: 13 / 14;
}
.brown201 {
    grid-column: 3 / 6;
    grid-row: 3 / 4;
}
.brown202 {
    grid-column: 2 / 3;
    grid-row: 4 / 7;
}
.brown203 {
    grid-column: 4 / 5;
    grid-row: 4 / 6;
}
.brown204 {
    grid-column: 5 / 6;
    grid-row: 5 / 6;
}
.brown205 {
    grid-column: 3 / 4;
    grid-row: 6 / 7;
}
.brown206 {
    grid-column: 2 / 5;
    grid-row: 15 / 16;
}
.brown207 {
    grid-column: 9 / 12;
    grid-row: 15 / 16;
}
.brown208 {
    grid-column: 1 / 5;
    grid-row: 16 / 17;
}
.brown209 {
    grid-column: 9 / 13;
    grid-row: 16 / 17;
}
.black201 {
    grid-column: 9 / 10;
    grid-row: 3 / 5;
}
.black202 {
    grid-column: 10 / 11;
}
.black203 {
    grid-column: 9 / 13;
}
.blue201 {
    grid-column: 5 / 6;
    grid-row: 8 / 11;
}
.blue202 {
    grid-column: 8 / 9;
    grid-row: 9 / 11;
}
.blue203 {
    grid-column: 6 / 8;
    grid-row: 10 / 12;
}
.blue204 {
    grid-column: 4 / 5;
}
.blue205 {
    grid-column: 9 / 10;
}
.blue206 {
    grid-column: 4 / 10;
}
.blue207 {
    grid-column: 3 / 11;
}
.blue208 {
    grid-column: 3 / 6;
}
.blue209 {
    grid-column: 8 / 11;
}
.yellow201 {
    grid-column: 5 / 6;
    grid-row: 11 / 12;
}
.yellow202 {
    grid-column: 8 / 9;
    grid-row: 11 / 12;
}

Mi proyecto fue hacerle una p谩gina de fotograf铆a a un amigo.
Tomando los siguientes cursos seguire mejorando la p谩gina.
desktop:

Mobile:

Resultado

Mi inspiraci贸n siempre fue Windows 8

aqui mi reto