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

Curso Profesional de CSS Grid Layout

Lleva tus conocimientos de CSS a otro nivel

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

¿De dónde venimos y en dónde estamos?

¿Cómo fue pensado CSS cuando se creó?

Limitaciones de CSS y el problema de los elementos flotantes

Herramientas que nos han facilitado el camino

¿Cómo se llegó al concepto de CSS Grid?

¿CSS Grid es una idea nueva? La evolución de la especificación

¿Qué significa Grid para CSS?

Control de alineamiento

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

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

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

Modos de escritura y ejes de alineamiento + Reto

Propiedades físicas y lógicas en CSS + Quiz

Técnicas de alineamiento con Flexbox

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

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

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

¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos

Propiedades y valores para el elemento padre

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

Creando filas, columnas y espaciado + Reto

Alineamiento en el elemento contenedor + Quiz

Generación automática de tracks + Quíz

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

Propiedades y valores para los elementos hijos

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

Ubicación + Reto

Alineamiento en los elementos hijos + Quiz

¡Manos al código! Fase de ubicación y alineamiento

Continuando con la fase de ubicación y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

Responsive y CSS Grid

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

Si ya tienes una cuenta,

Recursos

Aportes 189

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Sebastian Heredia

hace 4 años

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!

Liza Fernanda Castrillón Díaz

hace 4 años

No sé, pero esta imagen me ayudo bastante. espero a a vosotros también!!! ❤️
![](

RetaxMaster

hace 4 años

¡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

Fernando Quinteros Gutierrez

hace 4 años

🚸 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.

Kevin Garcia

hace 4 años

Les comparto mis apuntes de la clase.

Sebastián Buitrago

hace 4 años

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

Julian Andres Perez Pineda

hace 4 años

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;
}```

Liza Fernanda Castrillón Díaz

hace 4 años

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%;
}

Brandon Argel Verdeja Dominguez

hace 4 años

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";
    }
}

José Gregorio Estrada Meneses

hace 4 años

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;
}

santigo171

hace 4 años

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

Pero piensa en las “columnas” que sostienen a una casa, siempre van paradas de abajo a arriba. Esto me ayudó mucho

Luis Alexander Chip Teleyón

hace 4 años

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;
}

Christian Alvarenga

hace 4 años

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. 🤔

Samuel Gustavo Pérez Flores

hace 4 años

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

Óscar Andrés Ugarte De La Fuente

hace 4 años

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

Captura de pantalla 2021-03-15 212410.png

Ignacio Consuegra

hace 4 años

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.

Estiven Ruiz Arenas

hace 4 años

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;
}

Christian Ruben Rodriguez Gonzales

hace 4 años

esta chica no explica en la computadora
no explica bien

Patricio Manuel Ugarte

hace 4 años

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í:

Joel Eduardo Sánchez Herrera

hace 4 años

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

Raúl Adolfo Sánchez Rodríguez

hace un año

Solución QUIZ

Paso 1: Maquetación html
Paso 2: Estilos css
Resultado:

josee-gt

hace un año

Esta fue mi solución 👍

/* --HTML--*/
 <div class="grid">
  <div class="item">
    <div class="hijo-item">❤️</div>
  </div>
</div>

/* --CSS --*/

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:50px;
  background-color:purple;
  height:100px;
  widht:100%;
}
.item{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:25px;
  background-color:#D2E3C8;
  width:100%;
}
.hijo-item{
  display:grid;
  width:100%;
  background-color:#FCF5ED;
}

Maria Esther Mendoza Zafra

Si ya tienes una cuenta,

Curso Profesional de CSS Grid Layout

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

🚸 Grid y las relaciones padre e hijos inmediatos

Reto:

Código:

Apuntes / Resumen / Notas 😊