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

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

14/28
Recursos

Aportes 174

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

Quiz realizado

Primero mostrare la forma que lo hice sin necesidad de usar display grid.

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>Document</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <div class="padre">
        <div class="padre-hijo">
            <div class="padre-hijo-hijo">
                
            </div>
        </div>

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

CSS

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.padre{
    background-color: blueviolet;
    width: 100%;
    height: 150px;
}

.padre-hijo{
    background-color: brown;
    width: 50%;
    height: 50%;
}

.padre-hijo-hijo{
    background-color: aqua;
    width: 50%;
    height: 50%;
}

Reto utilizando Display Grid

Quedo de la siguiente manera.

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>Document</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <div class="container">
        <div class="container-item">
            <div class="container-item-child">
                <p> <3 </p>
            </div>
        </div>
    </div>
</body>
</html>

CSS

body{
    margin: 0;
    height: 0;
    box-sizing: border-box;
}

.container{
    display: grid;
    background-color: aqua;
    width: 100%;
    height: 150px;
    grid-template: repeat(2,1fr) / repeat(2,1fr);
}

.container-item{
    background-color: black;
    display: grid;
    grid-template: repeat(2,1fr) / repeat(2,1fr);
}

.container-item-child{
    background-color: azure;
    
}

隆Espero les sirva de guia!

No s茅, pero esta imagen me ayudo bastante. espero a a vosotros tambi茅n!!! 鉂わ笍
![](

隆Con CSS Grid todo es posible!
.
S铆 es posible hacerlo con CSS Grid porque, practicamente el rosado y el amarillo son una versi贸n escalada del morado y el rosado, por tanto, al morado y al rosado podr铆amos ponerles la misma grid, y si es posible porque pr谩cticamente es un grid de 2 x 2 馃槃
.
Se va a mirar la soluci贸n del Quiz鈥
.
隆S铆!, ten铆a raz贸n, si es posible jajajaja

馃毟 Grid y las relaciones padre e hijos inmediatos

<h4>Ideas/conceptos claves</h4>

CSS Grid se puede utilizar para lograr muchos dise帽os diferentes. Tambi茅n se destaca por permitir dividir una p谩gina en 谩reas o regiones principales, por definir la relaci贸n en t茅rminos de tama帽o, posici贸n y capas entre partes de un control construido a partir de primitivas HTML.

<h4>Apuntes</h4>
  • Grid nos permite crear rejillas que tenga filas y columnas

  • En este momento se tiene una mayor complejidad en el dise帽o web

  • Siempre se tendr谩 un Contenedor (padre)

    • Los items (elementos hijos) ser谩n los que estar谩n dentro de este contenedor
      • Los hijos tambi茅n pueden ser padres
    • Todos los padres tienen que tener:
    display: grid;
    

RESUMEN: Usar CSS Grid consiste en tener un elemento padre el cual se definir谩 la propiedad display grid, sus elementos hijos ser谩n afectados por esta regla, siendo posicionados seg煤n la forma establecida la grilla.

Les comparto mis apuntes de la clase.

la forma mas facil de reconocer a los hijos y a los padres es la identacion por eso esta importante identar bien el codigo, y aunque a veces el editor lo puede hacer bien, a veces es necesario revisar la identacion para dejar nuestro codigo mas limpio, y mas facil de leer

Quiz con grid
![](
CSS

body{
    padding: 0;
    margin: 0;
}
.Abuelo{
    display: grid;
    width: 100vw;
    height: 100px;
    grid-template: repeat(2,1fr) / repeat(2,1fr);
    background-color: #e6976d;
}
.Padre{
    display: grid;
    background-color: #f7ac83;
    grid-template: inherit; 
}
.CblH{
    display: flex;
    background-color: #FBC8AD;
    justify-content: center;
}```

HECHO!!
![](

C贸digo:

<body>
  <div class="parent">
    <div class="parent-child">
        <div class="parent-child-child"> 
          <p>鉂わ笍</p>     
       </div>
    </div>
   </div>
</body>



body{
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}
.parent{
  background-color: #a4ebf3;
  width: 90%;
  height: 150px;
}
.parent-child{
  background-color: #ccf2f4;
  width: 50%;
  height: 50%;
}
.parent-child-child{
  background-color: #f4f9f9;
  width: 50%;
  height: 50%;
}

CSS Grid es impresionante, y hace todo m谩s f谩cil, les comparto una manera de maquetar una p谩gina responsive con Grid:
https://www.youtube.com/watch?v=9w3gy2dYN_E

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
      href="https://fonts.googleapis.com/css?family=Roboto"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="grid.css" />
    <title>CSS Grid</title>
  </head>
  <body>
    <div class="contenedor">
      <header class="header">
        <h2>Header</h2>
      </header>
      <main class="contenido">
        <h1>Contenido</h1>
        <p>
          lorem*100
          <br />
          <br />
          lorem*100
        </p>
      </main>
      <aside class="sidebar">
        <h3>SideBar</h3>
      </aside>
      <div class="widget-1">
        <h3>Widget 1</h3>
      </div>
      <div class="widget-2">
        <h3>Widget 2</h3>
      </div>
      <footer class="footer">
        <h3>Footer</h3>
      </footer>
    </div>
  </body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #E9ECF4;
    color: #000000;
    font-family: 'Roboto', sans-serif;
}

.contenedor {
    width: 90%;
    max-width: 1000px;
    margin: 20px auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
        "header header header"
        "contenido contenido sidebar"
        "widget-1 widget-2 sidebar"
        "footer footer footer";
}

.contenedor>div,
.contenedor .header,
.contenedor .sidebar,
.contenedor .footer,
.contenedor .contenido {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
}

.contenedor .header {
    background-color: #12203e;
    color: white;
    grid-area: header;
}

.contenedor .contenido {
    grid-area: contenido;
}

.contenedor .sidebar {
    background-color: #faa43d;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    grid-area: sidebar;
}

.contenedor .widget-1,
.contenedor .widget-2 {
    background-color: #55a8fd;
    color: white;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenedor .widget-1 {
    grid-area: widget-1;
}

.contenedor .widget-2 {
    grid-area: widget-2;
}

.contenedor .footer {
    background-color: #12203e;
    color: white;
    text-align: center;
    grid-area: footer;
}

@media screen and (max-width: 768px) {
    .contenedor {
        grid-template-areas:
            "header header header"
            "contenido contenido contenido"
            "sidebar sidebar sidebar"
            "widget-1 widget-1 widget-2"
            "footer footer footer";
    }
}

Esta fue mi soluci贸n

<!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/style.css">
    <title>Challenge Class 14</title>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">
                <p>Heart</p> 
            </div>
        </div>
    </div>
    
</body>
</html>
*{
    box-sizing: border-box;
    margin: 0 ;
    padding: 0;
}
html{
    font-size: 62.5%;
}

.grandfather {
    display: grid;
    background-color: #f3bad6;
    width: 100%;
    height: 200px;
    grid-template: repeat(2,1fr)/repeat(2,1fr);
}
.father {
    display: grid;
    background-color: #ea86b6;
    grid-template: repeat(2,1fr)/repeat(2,1fr);
}
.son {
    display: grid;
    align-items: center;
    background-color: #e05297;
}
.son p {
    text-align: center;
    font-size: 2.5rem;
    color: white;
}

No s茅 si me perd铆 o no pero, creo que no mostr贸 como se crean las grillas, solo que el padre debe tener el valor de grid en la propiedad display. 馃

No se si lo hice correctamente, pero ah铆 esta
![](

Con respecto al quiz si creo que sea posible, ponemos 3 contenedores padres-hijo dentro del contenedor padre, y a cada uno le ponemos un color diferente.

Quiz completado

HTML

<div class="padre">
  <div class="hijo">
    <div class="sub-hijo">馃懡</div>
  </div>  
</div>

CSS

.padre{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  height: 200px;
  background-color: #5BEFFF;
}
.hijo{
  background-color: #547B80;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}
.sub-hijo{
  background-color: #49BFCC;
}

Siempre se me ha dificultado memorizar si las l铆neas verticales son las columnas o lo son las horizontales.

Pero piensa en las 鈥渃olumnas鈥 que sostienen a una casa, siempre van paradas de abajo a arriba. Esto me ayud贸 mucho

esta chica no explica en la computadora
no explica bien

De esta forma realice el Quiz

<div class="container">
  <div class="item">
    <div class="sub-item"></div>
  </div>
</div>
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container,
.item {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr)
}

.container {
  background-color: steelblue;
  height: 200px;
}

.item {
  background-color: greenyellow;
}

.sub-item {
  background-color: magenta;
}

Comparto como curiosidad un truco para los que sepan utilizar Emmet,. Se puede generar la estructura necesaria para el desaf铆o de la clase haciendo:

div.grid-container-0>div.grid-container-1>div.grid-item{馃挌}+div*3^div*3^div*3

Esto generar铆a la siguiente estructura HTML:

<div class="grid-container-0">
    <div class="grid-container-1">
        <div class="grid-item">馃挌</div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div></div>
<div></div>
<div></div>

El CSS que utilic茅 fue:

[class ^="grid-container"] {
    display: grid;
    grid-template-columns: repeat(2, 50%);
}
.grid-container-0 {
    background-color: #791c75;
    grid-template-rows: repeat(2, 0px);
}
.grid-container-1 {
    background-color: #f7c4cd;
    grid-template-rows: repeat(2, 25px);
}
.grid-item {
    background-color: #feefdd;
}

El resultado visualmente qued贸 as铆:

Para poder trabajar en CSS Grid hay que tener claro las relaciones entre padre e hijo. Pero que es Grid?: Son las lineas verticales y horizontales.

Debemos de tener en cuenta que vamos a tener un padre, que son todos los elementos contenedores, todo el grid. Y los elementos hijos ser谩n todos los que est茅n ubicados ahi adentro.

Los hijos tambi茅n pueden ser padres, esto aumenta la complejidad pero solo hay que saber quien es quien.

LA ESTRUCTURA DE HTML ES IMPORTANTE PARA SABER QUIENES SON LOS HIJOS Y LOS PADRES.

TODOS LOS PADRES DEBEN DE TENER LA PROPIEDAD DISPLAY:GRID

Quiz Completado!
Les comparto como qued贸.

El c贸digo es el siguiente:
https://codepen.io/mariamz22/pen/MWVRNNd

Si es posible, aqui el quiz realizado por codepen.

html
<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<link rel=鈥渟tylesheet鈥 href="./style.css">
<title>tarea</title>
</head>
<body>
<div class=鈥淧adre鈥>
<div class=鈥減adre-hijo鈥>
<div class=鈥淗ijo鈥>馃挌</div>
</div>
</div>
</body>
</html>

css

  • {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    }
    .Padre {
    display: flex;
    background-color: lightblue;
    flex-direction: column;
    /* position: relative; */
    width: 100%;
    height: 25vh;
    }
    .padre-hijo {
    background-color: lightcoral;
    display: grid;
    height: 10%;
    width: 50%;
    top: 0px;
    position: absolute;
    }
    .Hijo {
    background-color: lightgreen;
    height: 25%;
    width: 50%;
    position: absolute;
    top: 0%;
    font-size: 3px;
    }

S铆, s铆 se puede y la verdad, no me esper茅 que fuese tan f谩cil.

Vamos creciendo poco a poco.

Ejemplo:

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">
</head>
<body>
    <div class="parent">
        <div class="child">
            <div class="child--square1"><b>Aqu铆 va un coraz贸n xD</b></div>
        </div>
    </div>
</body>
</html> 

CSS:

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

.parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40px 40px;
    background-color: rgb(230, 254, 172);
}

.child {
    background-color: rgb(25, 25, 190);
    width: 100%;
    height: 40px;
}

.child--square1 {
    background-color: rgb(233, 107, 229);
    width: 50%;
    height: 20px;
    font-family: Helvetica, sans-serif;
    color: beige;
} 

Reto completado!

Este curso est谩 deficiente en muchos aspectos. Ac谩 pueden ver en la pr谩ctica muchos de los conceptos y entender de manera satisfactoria.

LIKE PARA QUE LE LLEGUE A OTRO COMPA脩ERO CONFUNDIDO.

https://www.youtube.com/channel/UCJl1YajcPWTeJNsQhGyMIMg

<!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>
</head>
<body>

    <div class="uno"> 
        <div class="dos">
            <div class="tres">馃</div>
        </div>
    </div>
    
    <style>
        body {
            box-sizing: border-box;
            margin: 0px;
        }
        .uno {
            width: 100%;
            height: 200px;
            background-color: blueviolet;
        }

        .dos {
            width: 50%;
            background-color: thistle;
            height: 100px;
        }

        .tres {
            width: 50%;
            height: 50px;
            background-color: azure;

        }
    </style>
</body>
</html>

una correcci贸n

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100px;
    background: purple;
}

.son-father {
    display: grid;
    grid-template-columns: 1fr, 1fr;
    width: 100%;
    height: 30px;
    background: pink;
}

.son-of-son-father {
    display: grid;
    width: 50%;
    height: 15px;
    background: papayawhip;
}

.son-of-son-father p {
    display: flex;
    padding: 0;
    margin: 0;
    font-size: 12px;
}

creo que me ha quedado,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Probando grid</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>

    <div class="container">
        <div class="son-father">
            <div class="son-of-son-father">
                <p> 馃挏 </p>
            </div>
        </div>
    </div>
</body>
</html>

`

Soluci贸n QUIZ

_

  1. Paso 1: Maquetaci贸n html

  2. Paso 2: Estilos css

  3. Resultado:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="item-a">
                <p>~馃挅~</p>
            </div>
        </div>
    </div>
</body>
</html>
body{
    margin: 0;
}
.container {
    width: 100%;
    height: 100px;
    background-color: #ca19b3;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(4, auto);
}
.item{
    background-color: #2fbacf;
    display: grid;
    grid-row: 1 / span 2;
    grid-column: 1 / span 2;
    
    
}
.item-a{
    background-color: #ecfa93;
    width: 68%;
    height: 30px;
        
}
p{  margin: 0;
    text-align: center;
    padding-top: 5px;
    font-weight: bold;

}```

<div class="container">
  <div class="items">
    <div class="sub-items">
      <span>@.@</span>
    </div>
  </div>
</div>

body {
  margin: 0; 
}

.container, .items {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;  
}

.container {
  background-color: yellow; 
}

.items {
  background-color: blue; 
}

.sub-items {
  background-color: red; 
}

span {
  background-color: white; 
}

reto completado

HTML

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Reto GRID</title>
</head>
<body>
    <div class="padre">
        <div class="hijo">
            <div class="hijo-hijo">馃挌</div>
        </div>
    </div>
</body>
</html>> 

CSS

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

.padre {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 100px);
    background-color: purple;
}

.hijo {
    grid-area: 1 / 1 / 2 / 2;
    background-color: pink;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 50px);
}


.hijo-hijo {
    grid-area: 1 / 1 / 2 / 2 ;
    background-color: bisque;
}> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="sub-item">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1LwmJ-nYdrJ_1MM62FtOK2PnWPBKLHLfnhA&usqp=CAU" alt=" Este es un coraz贸n">
            </div>
        </div>
    </div>
</body>
</html>
body {
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    height: 25vh;
    display: grid;
    background-color: purple;
}
.item {
    width: 50%;
    height: 50%;
    background-color: pink;
}
.sub-item {
    width: 50%;
    height: 50%;
    background-color: white;
}
img {
    width: 25px;
    height: 25px;
    margin-left: 5px;
}

![](```
.padre-hijo-hijo{
background-color: papayawhip;

}

.padre-hijo {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
border: 1px solid blue;
height:100%;
background-color: pink;

}

.padre {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
border: 1px solid red;
/*
height: 300px;
width: 100%;
*/
background-color: purple;
}

![](

.wrapper {
    display: grid;
    border: 5px solid red;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows:repeat(4,1rf) ;

}

.elemento {
    background-color: blueviolet;
    height: 40px;
    
}

.elemento1 {
    background-color: papayawhip;
}
.elemento2, .elemento3, .elemento5, .elemento6 , .elemento7 {
    background-color: pink;
}
<
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz clase 13</title>
    <link rel="stylesheet" href="./quiz.css">
</head>
<body>
<!-- este es el el contenedor morado猬囷笍 -->
<div class="padre">
    <!-- este es el el contenedor rosa猬囷笍 -->
  <div class="padre-hijo">
     <!-- este es el el contenedor beige猬囷笍 -->
    <div class="padre-hijo_hijo">馃挌</div>
  </div>
</div>
</body>
</html>
> 
<
:root{
    --beige:#ffefdc;
    --rosa:#f8c1cb;
    --morado:#781c77;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.padre{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,auto);
    height: 300px;
background-color: var(--morado);
}
.padre-hijo{
    background-color: var(--rosa);
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,auto);
}
.padre-hijo_hijo{
    background-color: beige;
}
> 

Reto

Html

Css

Bueno s铆 es posible, ya lo he intentado antes xd. La idea es cierta, que cada padre debe ser contenedor grid.


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>Document</title>
    <link rel="stylesheet" href="reto.css">
</head>
<body>
    <div class="morado">
        <div class="rosado">
            <div class="amarillo">
                <span>馃挌</span>
            </div>
        </div>
    </div>
</body>
</html>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.morado{
    width: 100%;
    height: 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    background-color: blueviolet;
}
.rosado{
    height: 50%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    background-color: pink;
}
.amarillo{
    width: 100%;
    height: 50%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background-color: rgb(238, 208, 153);
}


No se como enviar la imagen que me quedo grande

es mi reto no se como enviar el mensaje:

file:///C:/Users/Patoo/Documents/Padre.html

me quedo lindo
<body>

<div class="padre-yellow">
   <div class="padre-hijo">
   
    <div class="p-chi-child">
      
        <p>馃憣</p>
      </div> 
      <P>ESTOY MUY FELIZ APRENDIENDO </P>
   </div>
    <p class="Aguilar">gracias prof. Aguilar</p>
    </div>

</body>

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    html {
    font-size: 62.5%;
    }
    .padre-yellow {
    display: grid;
    background-color: yellow;
    width: 120%;
    height: 300%;
    grid-template: repeat(2,1fr)/repeat(2,1fr);
    }
    .padre-yellow p {
    color: black;
    }
    .Aguilar {

    font-size: 2.5rem;
    margin-top: 82px;
    text-align: center;
    }
    .padre-hijo {
    display: grid;
    background-color: green;
    grid-template: repeat(2,1fr)/repeat(2,1fr);
    }
    .padre-hijo P {
    text-align: center;
    font-size: 2.5rem;
    color: white;

}
.p-chi-child {
display: grid;
align-items: center;
background-color: red;
}
.p-chi-child p {
text-align: center;
font-size: 2.5rem;
}

Es una grilla 2x2 en donde el m谩s grande es el contenedor, este tiene un hijo que llena una celda, y a su vez este hijo tiene otro m谩s peque帽o.

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>Probando grid</title>
    <link rel="stylesheet"  href="./styles.css"/>
</head>
<body>
    <div class="container">
        <div class="item">
          <div class="item-child">馃尡</div>
        </div>
    </div>      
</body>
</html>> 

CSS

<* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    display: grid; 
    place-content: center;
}
.container {
    width: 600px;
    height: 100px; 
    background-color: #E1FFB1;
    display: grid; 
    grid-template: repeat(2, 1fr)/ repeat(2, 1fr);
  
  }
  .item {
    width: 300px;
    height: 50px;
    background-color: #C7F2A4;
  }
  .item-child {
    width: 150px;
    height: 25px;
    background-color: #B6E388;
    color: white;
  }> 

Reto:

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>
</head>
<body>
    <div class="contenedor">
        <div class="interior"></div>
        <div class="medio"></div>
        <div></div>
        <div></div>
        <div class="medio"></div>
        <div class="medio"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <style>
            .contenedor {
                display: grid;
                grid-template-columns: repeat(4, 360px);
                grid-template-rows: repeat(4, 120px);
            }

            .contenedor div {
                background-color: #1d5dc2;
            }

            .contenedor .medio {
                background-color: #124f43;
            }

            .contenedor .interior {
                background-color: #e7bb3a;
            }
        </style>
    </div>
</body>
</html>

Toda la grilla haria la funcion de padre, los colores morado son hijos junto al color rosadito, y el color blanco dentro del rosado es un hijo del mismo rosadito.

Considero que si ya que como lo menciono anteriormente cada hijo puede a su vez ser padre ejemplo tenemos al abuelo que es morado , el padre rosado y el hijo beis a los dos primeros se le aplicar铆an las mismas propiedades el de tener dos filas dos columnas y al tercero el color y el items, saludos

Mi ejercicio

HTML

CSS

Forma en que lo hice.

body {
            margin: 0;
            padding: 0;
            height: 100vh;
            min-height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(225deg, var(--background)1%, var(--background) 50%, var(--black) 90%, var(--black)100%);
        }

        .container {
            display: grid;
            width: 800px;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 50px);
            background-color: slateblue;
        }
        .item {
            width: 100%;
            height: 100%;
            background-color: var(--slime);
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        .sub-item {
            width: 100%;
            height: 100%;
            background-color: var(--tooth);
        }

El Quiz: Por lo que dijo, si es posible, porque ah铆 hay un contenedor padre d贸nde tiene un elemento o 铆tem hijo y este a su vez tiene tambi茅n un hijo, es decir, un hijo del hijo-Padre.

Buenas! adjunto mi quiz!

![](

<body>
    <div class="container">
        <div class="item">
            <div class="sub-item"></div>
        </div>
    </div>
</body>

<style>
    .container {
        width: 500px;
        height: 150px;
        background: purple;
        display: grid;
        grid-template-columns: auto;
    }

    .item {
        width: 350px;
        height: 100px;
        background: palevioletred;
    }

    .sub-item {
        width: 200px;
        height: 50px;
        background: papayawhip;
    }
</style>

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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="container-1">
            <div class="container-2">	
                &#128154;</div>
        </div>
    </div>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100%;
    height: 300px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:repeat(2, 1fr) ;
    background-color: #700d79;
}
.container-1{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:repeat(2, 1fr) ;
    background-color: #f4bdcb;
}
.container-2{
    background-color: #fcefdd;
}

**Quiz **

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>Document</title>
    <link rel="stylesheet" href="/Reto-1/style.css">
</head>
<body>
    <div class="container">
        <div class="item1">
            <div class="sub-item"></div>
        </div>
    </div>
</body>
</html>

CSS

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

.container {
    display: grid;
    background-color: blueviolet;
    width: 100%;
    height: 150px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.item1 {
    background-color: blue;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.sub-item {
    background-color: white;
}

Aca va el reto hecho con y sin CSS Grid

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="stylesheet" href="quiz14.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="sub-item">馃挌 Sin CSS Grid 馃挌</div>
        </div>
    </div>
    <div class="container-2">
        <div class="item">
            <div class="sub-item">馃挌 Con CSS Grid 馃挌</div>
        </div>
    </div>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container {
    width: 100vw;
    height: 100px;
    background-color: #781c76;
    margin-bottom: 20px;
}
.item {
    width: 50%;
    height: 50%;
    background-color: #f9c2cb;
}
.sub-item {
    width: 50%;
    height: 50%;
    background-color: #feeeda;
}
.container-2 {
    display: grid;
    width: 100vw;
    height: 100px;
    grid-template-columns: repeat(2, 1fr);
    background-color: #781c76;
}
.container-2 .item {
    display: grid;
    width: 100%;
    height: 50%;
    grid-template-columns: repeat(2, 1fr);
    background-color: #f9c2cb;
}
.container-2 .sub-item {
    width: 100%;
    height: 50%;
    background-color: #feeeda;
}```

Soluci贸n usando grid-template-columns y grid-template-rows:

html:

<section class="container">
        <div class="big">
            <div class="medium"> </div>
        </div>
      </section>

css:

.container {
    display: grid;
    width: 100%;
    height: 250px;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: rgb(56, 3, 32);
  }
  
  .big {
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background-color: rgb(122, 7, 76);
  }
  .medium {
    
    background-color: papayawhip;
    grid-column: 1 / 2;
    grid-row: 1 / 2;

  } 

Se que se puede con grid-template-areas pero en realidad se me complico, entonces use el m茅todo anterior.

Apuntes / Resumen / Notas 馃槉

Les comparto mis apuntes sobre grid

Reto:

y aqu铆 el c贸digo con grid

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container {
        background-color: rgb(91, 51, 236);
        width: 100%;
        height: 500px;
        display: grid;
        grid-template-columns: 3fr 1fr 1fr;
        grid-template-rows: repeat(3,1fr);

    }
    .item-1 {
        grid-column: 1 /3;
        grid-row: 1/ 3;
        background-color: rgb(220, 133, 247);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 1fr);

    }
    .sub-item-1 {
        grid-column: 1 / 3 ;
        grid-row: 1 / 2;
        background-color: blanchedalmond;
        display: flex;
        font-size: 2rem;
        font-family: monospace;
        font-weight: bold;
        align-items: center;
        justify-content: center;

    }
</style>
<body>
    <div class="container">
        <div class="item-1">
            <div class="sub-item-1">
                <p>馃挌 Platzi 馃挌 </p>
            </div>
        </div>
    </div>
</body>
</html>

Yo lo hice de esta manera, quizas no son las mismas medidas que tiene la profe pero creo que asi va la cosa :

el 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>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="main-container">
        <div class="sub-container">
            <div class="container-2"><img src="./media/pikachu.png" alt="pikachu"></div>
        </div>
    </div>    
</body>
</html>

el css:

.main-container{
    display: grid;
    background-color: rgb(117, 2, 117);
    width: 100%;
    height: 200px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}
.sub-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    background-color: rgb(247, 188, 207);
}
.container-2 {
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: papayawhip;
}

La verdad es que se que podria usar menos lineas para el CSS pero en este preciso momento no recuerdo bien todo y use lo que si recuerdo 馃槄

HTML:

 <div class="container">
        <div>鉂わ笍</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>  

CSS:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.container div {
    background-color: purple;
    height: 20px;
}

.container div:first-child {
    background-color: sandybrown;
}

.container div:nth-child(2),
.container div:nth-child(5),
.container div:nth-child(6) {
    background-color: pink;
}

HTML:

	<div class="grid-container">
            <div></div>
            <div></div>
            <div></div>
        </div>

CSS:

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

.grid-container {
  margin: 50px auto;
  width: 80vw;
  height: 200px;
  display: grid;
  background-color: #791C7A;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.grid-container div:nth-child(1) {
  background-color: #FEEFDC;
  grid-area: 1/1/span 1/span 1;
}
.grid-container div:nth-child(2) {
  background-color: #F8C3CD;
  grid-area: 1/2/span 2/span 1;
}
.grid-container div:nth-child(3) {
  background-color: #F8C3CD;
  grid-area: 2/1/span 1/span 1;
}

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>Document</title>
    <link rel="stylesheet" href="./padre-hijo.css">
</head>
<body>
    <div class="father-1">
        <div class="father-2">
            <div class="son">

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

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-size: 62.5%;
}

.father-1 {
    width: 100vw;
    height: 20vh;
    background-color: green;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.father-2 {
    width: 100%;
    height: 100%;
    background-color: blue;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

}
.son {
    width: 100%;
    height: 100%;
    background-color: red;
}

Logrado

Si alguien quiere poner emojis en windows con vscode se usa tecla win + .

Aqu铆 mi Quiz鈥 Pens茅 qu茅 ser铆a m谩s dificil

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    height: 100px;
    background-color: blueviolet;
}
.grid-container .item1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    background-color: palevioletred;
}
.grid-container .item1-1 {
    background-color: papayawhip;
}

Si es posible! cada item dentro de un padre grid puede tener la propiedad display: grid y manejar todo su contenido interno independientemente de su padre.

Hice un peque帽o cambio para poder observar mejor el grid.

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="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>

    </header>
    <main>
        <div class="container">
            <div class="primerpadre">
                <div class="segundopadre">
                    <div class="tercerpadre">
                        <div> 鉂わ笍 </div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </main>
    <footer>

    </footer>
</body>
</html>

CSS

/*
    1. Posicionamiento
    2. Modelo de caja
    3. Tipografia
    4. Visuales
    5. Otros
*/

html{
    font-size: 62.2%;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-size: 1.5rem;
}

.container{
    width:100%;
    height: 100vh;
}
.primerpadre, .segundopadre, .tercerpadre{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;
}
.primerpadre > div, .segundopadre> div, .tercerpadre> div{
    border: 1px solid white;
}
.primerpadre{
    background-color: purple;
}
.segundopadre{
    background-color: pink;
}
.tercerpadre{
    background-color: aquamarine;
}
<!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>
        .contenedor {
            width: 100%;
            height: 15vh;
            display: grid;
            background-color: aqua;
            grid-template-columns: repeat(4,1fr);
            grid-template-rows: repeat(4,1fr)
        }
        .item1 {
            background-color:white ;
            grid-area: 1/1/3/4;
        }
        .item2 {
            background-color:rgb(224, 39, 39) ;
            grid-area: 1/1/2/3;
        }
    </style>
</head>
<body>
    <div class="contenedor">
        <div class="item1"></div>
        <div class="item2"></div>

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

As铆 me sali贸.

C贸digo

HTML:

<body>
    <main class="padre">
        <div class="hijo-1"><span class="tiger">馃惎</span></div>
        <div class="hijo-2"></div>
        <div class="hijo-3"></div>
        <div class="hijo-4"></div>
        <div class="hijo-5"></div>
        <div class="hijo-6"></div>
        <div class="hijo-7"></div>
        <div class="hijo-8"></div>
        <div class="hijo-9"></div>
    </main>
</body>

CSS:

:root {
    --menor: #FFF1E1;
    --medio: #F9CAD4;
    --mayor: #873E85;
}

* {
    margin: 0;
    padding: 0;
}

.padre {
    display: grid;
    grid-template-columns: 2fr 2fr 4fr;
    grid-template-rows: 2fr 2fr 3fr;

    width: 100%;
    height: 300px;
}

.tiger {
    display: flex;
    align-items: center;

    height: 100%;
}

.hijo-1 {
    grid-column: 1 2;

    background-color: var(--menor);
}

.hijo-2 {
    grid-column: 2 3;

    background-color: var(--medio);
}

.hijo-3 {
    grid-column: 3 4;

    background-color: var(--mayor);
}

.hijo-4 {
    grid-column: 1 2;

    background-color: var(--medio);
}

.hijo-5 {
    grid-column: 2 3;

    background-color: var(--medio);
}

.hijo-6 {
    grid-column: 3 4;

    background-color: var(--mayor);
}

.hijo-7 {
    background-color: var(--mayor);
}

.hijo-8 {
    background-color: var(--mayor);
}

.hijo-9 {
    background-color: var(--mayor);
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: grid;
    inline-size: 100%;
    block-size: 100px;
    background-color: #072227;
}

.item1 {
    inline-size: 50%;
    block-size: 50px;
    background: #4FBDBA;
}

.item2 {
    inline-size: 50%;
    block-size: 25px;
    background: #AEFEFF;
}

otra forma de hacerlo

HTML

<div class= "padre">
	<div class="one">
 	<div class="two">鉂わ笍 </div>
 </div>
 </div>

CSS

.padre{
    background-color: 	rgb(128, 0, 128);
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 400px;
    height: 60px;
  }
  .one{
      background-color: rgb(248, 182, 158);
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  }

  .two{
      background-color: palegoldenrod;
      color: rgb(116, 237, 116);
      font-size: 10px;
  }

hola si se puede hacer esto con display grid

HTML

<body>
  <div class="container">
      <div class="item">
        <div class="sub-item">
            <p>鉂わ笍</p>   
        </div>
      </div>
  </div>
</body>

CSS

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

.container{
  display: grid;
  background: red;
  height: 50vh;
  width: 150vw;
  
}

.item{
  display: grid;
  background: orange;
  height: 60%;
  width: 50%;
}

.sub-item{
  background: blue;
  height: 60%;
  width: 50%;
}

as铆 est谩 el mio con css grid

<!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>Padre e hijo</title>
    <link rel="stylesheet" href="padre-hijo.css">
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="sub-item">
                馃崡
            </div>
        </div>
    </div>
</body>
</html>

y en css

.container {
    background: rgb(30, 46, 184);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.item {
    background: rgb(37, 118, 138);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.sub-item {
    background: rgb(24, 102, 175);
}

As铆 me quedo.

Codigo CSS

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

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    background-color: rgba(27, 122, 205, 0.619);
}

.container .hijo-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    background-color: pink;
}

.container .hijo-1 .container-hijo-hijo:nth-child(1) {
    background-color: papayawhip;
}

Codigo HTML

 <body>
        <main class="container">
            <div class="container-hijo hijo-1">
                <p class="container-hijo-hijo">馃挌</p>
                <p class="container-hijo-hijo"></p>
            </div>
            <div class="container-hijo"></div>
            <div class="container-hijo"></div>
        </main>
    </body>

la profesora dice: dos filas y dos columnas para cada uno de los cuadritos.

.
La respuesta simple es si es posible, asi:
Dentro de una grid de 2x2 anidar otra grid de 2x2 y en esta ultima en la rimera celda ubicar a papayawhip.

    <div class="container2x2 purple">
        <div class="purple__item container2x2 pink">
            <div class="pink__item container papaya"><p>corazon</p></div>
            <div class="pink__item"><p>hija 2 de pink</p></div>
            <div class="pink__item"><p>hija 3 de pink</p></div>
            <div class="pink__item"><p>hija 4de pink</p></div>
        </div>
        <div class="purple__item"><p>hija 2 de purple</p></div>
        <div class="purple__item"><p>hija 3 de purple</p></div>
        <div class="purple__item"><p>hija 4 de purple</p></div>
    </div>

Con lo que hemos visto hasta ahora podemos hacer el markup de html si.
.
Pero con lo que hemos visto hasta ahora no podemos llevar a cabo la distribucion de los elementos, no se ha explicado como anidar las grids y tampoco como poner adentro las cosas para que ocupen una sola celda.
Por ahora solo podemos decir quienes son los padres condisplay grid.

Fue mas facil de lo que pense

<!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>
        .padre{
            display: grid;
            width: 100%;
            height: 200px;
            background-color: blueviolet;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr
        }
        .hijo-padre{
            display: grid;
            background-color: pink;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            width: 100%;
            height: 100%;
        }
        .hijo{
            display: grid;
            background-color: antiquewhite;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="padre">
        <div class="hijo-padre">
            <div class="hijo"> <3</div>
        </div>
    </div>
</body>
</html>

Reto completado.![](

Quiz cumplido si se puede con grid 馃槂
https://codepen.io/tatys-jaramillo/pen/GRyNgbR

Si se puede con display grid

Si es posible, tendriamos que tener varios niveles de 鈥渉ijos鈥 para lograrlo pero si seria posible

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>
    <link rel="stylesheet" href="./clase14.css">
</head>
<body>
    <div class="padre">
        <div class="hijo-padre-n1">
            <div class="hijo"></div>
        </div>
    </div>
</body>
</html>

Css:

.padre{
    width: 100%;
    height: 200px;
    background-color: blueviolet;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.hijo-padre-n1{
    background-color: pink;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.hijo{
    background-color: white;
}
<!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>Quiz</title>
    <link rel="stylesheet" href="style.css"></link>
</head>
<body>
    <div class="padre">
        <div class="item">
            <div class="sub-item1">
                <p> &#128154 </p>
            </div>
        </div>
    </div>
</body>
</html>
body{
    margin: 0;
    height: 0;
    box-sizing: border-box;
}

.padre{
    display: grid;
    grid-template: repeat(2,1fr) / repeat(2,1fr);
    background-color: darkorchid;
}

.item{
    background-color: pink;
    display: grid;
    grid-template: repeat(2,1fr) / repeat(2,1fr);
}

.sub-item1{
    background-color: lightgoldenrodyellow;
}

Comparto mi quiz

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></title>
    <link rel="stylesheet" href="./quiz-padre-hijo-inmediato.css">
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="sub-item"></div>
            <div class="sub-item"></div>
            <div class="sub-item"></div>
            <div class="sub-item"></div>
        </div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

CSS

.container{
    height: 200px;
    width: 600px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    background-color: purple;
}
.item:first-child{
    background-color: pink;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
}
.sub-item:first-child{
    background-color: papayawhip;
}

Creo que se pod铆a hacer m谩s corto el html pero no estoy seguro

Reto Cumplido

.first-grid {
    background-color:blueviolet;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);

    height: 100px;
}
.second-grid {
    background-color:darksalmon;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    grid-column: 1;
    grid-row: 1;
}
.third-grid {
    background-color: papayawhip;
    padding: 10px;
    font-size: 1.6rem;
}

QUIZ

aqu铆 dejo mi quiz

CSS

gracias a la herencia de los padres, los hijos reciben las propiedades de los padres haciendo que el c贸digo sea mas f谩cil de escribir

.container{
    width: 1622px;
    height: 280px;
    background-color: blueviolet;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.box-song{
    background: cornflowerblue;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
} 
.box-nieto{
    background: aquamarine;
    display: grid;
} 
.box-nieto img{
    width: 35px;
    align-self: center;
}

Este es mi reto.

Si se puede hacer con Grid, realice la prueba en donde los primeros dos cuadros (Los que estan m谩s afuera) les hice con dos columnas y dos filas, y en el tercer cuadro lo hice con solo dos columnas. Por 煤ltimo hice un cuarto cuadro pero para reprentar el coraz贸n verde que se visualiza en el ejemplo.


challenge completed!

Qu铆z completado 馃
Primera parte sin Grid - 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>Document</title>
    <!-- <link rel="stylesheet" href="./styles2.css"> -->
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="container">
        <div class="child-container">
            <div class="child--child-container">

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

Segunda parte sin Grid - CSS

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

.container {
    width: 100%;
    height: 150px;
    background: pink;
}

.child-container {
    width: 50%;
    height: 100px;
    background: aqua;
}

.child--child-container {
    width: 50%;
    height: 50px;
    background: papayawhip;
}

Primera parte con Grid - 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>Document</title>
    <link rel="stylesheet" href="./styles2.css">
    <!-- <link rel="stylesheet" href="./styles.css"> -->
</head>
<body>
    <div class="container">
        <div class="child-container">
            <div class="child--child-container">

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

Segunda parte con Grid - CSS

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

.container {
    width: 100%;
    background: pink;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.child-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    background: aqua;
}

.child--child-container {
    width: 100%;
    height: 50px;
    background: papayawhip;
}

Esta es la forma en la que lo realice

<<!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="stylecatalogo.css">
    <title>Cocos</title>
    <style>
      .container{
        width: 100%;
        height: 200px;
        background-color: red;
        display: grid;
        grid-template: repeat(4, 1fr) / repeat(6, 1fr);
      }
      
      .container2{
        display: grid;
        background: darkblue;
        grid-area: 1 / 1 / 4 / 5;
        grid-template: repeat(4, 1fr) / repeat(6, 1fr);
      }
      
      .container3{
        display: grid;
        background: darkgoldenrod;
        grid-area: 1 / 1 / 3 / 3;
      }

      
    </style>
</head>
<body>

   <div class="container">
     <div class="container2">
       <div class="container3">

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

css

.container{
display: grid;
width: 100%;
grid-template-columns: repeat(4, 250px);
grid-template-rows: repeat(4, 20px);
}
.cell{
width: 100%;
height: 100%;
}
.blanco{
background-color: white;
grid-column: 1/2;
grid-row: 1/2;
z-index: 2;
}
.rosado{
background-color: pink;
grid-column: 1/3;
grid-row: 1/3;
z-index: 1;
}
.violeta{
background-color: rebeccapurple;
grid-column: 1/5;
grid-row: 1/5;
z-index: 0;
}

Aqu铆 dejo el Quiz!

<html>
<div class=鈥渇ather鈥>
<div class=鈥渃hild鈥>
<div class=鈥渃hild-child鈥></div>
</div>
</div>
</html>

body{
margin:0;
padding:0:
}
.father{
display:grid;
grid-template-columns:repeat(2,1fr);
width:800px;
height:200px;
background-color:purple;
}
.child{
display:grid;
grid-template-columns:repeat(2,1fr);
height:100px;
background-color:pink;
}
.child-child{
height:50px;
background-color:yellow;
}

La explicaci贸n de los padres e hijos me parece excelente, si bien es muy b谩sica asi mismo es primordial, deber铆an darlo en los primeros cursos de maquetaci贸n con html y css, ya que a uno le toco entender a la fuerza y con pr谩ctica 馃槄

soluci贸n del quiz!

Cumpliendo el reto:

HTML

CSS:

La forma m谩s resumida de realizar el reto con grid:

HTML

CSS