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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Creando filas, columnas y espaciado + Reto

18/28
Recursos

Aportes 88

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

.container {
    display: grid;
    grid-template: repeat(4, 20px) / repeat(4, 20px);
}```

Ahhhh el grid template areas fue mi favorito cuando lo conocí, tanto que empecé a usarlo para todos mis proyectos jaja, fue gracioso que justamente un día después de aprender sobre CSS Grid y grid template areas me contrataron para hacer una página con CSS Grid y pues… amé los tomplate areas jaja, es decir, literalmente es como crear el layout de tu web y decir: “Aquí irá el header, por acá el footer”, etc.
.
Pero no acaba ahí, porque también podemos hacer magia con las media queries!, cuando el tamaño del dispositivo cambie, podemos definir un nuevo template, un template completamente diferente… ¡y funcionará!
.
Lo que si no funciona es poner un elemento que divida a otro, por ejemplo, esto:
.

grid-template-areas:
    "header header header"
    "body   body   body"
    "header header header"

Porque sino se rompería la grid y simplemente no funcionaría 😄

Siento que el css grid es algo asi :

Así va quedando los posibles contenedores de mi proyecto:

Y también los sub-contenedores:

A simple vista no se veía tan complejo pero ya veremos como queda ;D

🗓️ Creando filas, columnas y espaciado

<h4>Apuntes</h4>
  • Para poder crear columnas debemos usar grid-template-columns
  • Para crear filas debemos usar grid-template-rows
  • Para crear una grid debemos escribir en el CSS
.container {
	display: grid;
	grid-template-columns: 20px 20px 20px;
	grid-template-rows: 20px 20px 20px;
}
  • Pero si deseamos acortar esta forma podemos usar repeat
.container {
	display: grid;
	grid-template-columns: repeat(3, 20px);
	grid-template-rows: repeat(3, 20px);
}
  • Además, que grid cuenta con un shorthand
.container {
	display: grid;
	grid-template: repeat(3, 20px);
}
  • Si deseamos tener un espacio interno podemos usar la propiedad gap

    • Existen varias maneras de implementarlo

      • Antigua
      .container {
      	display: grid;
      	grid-template: repeat(3, 20px);
      	grid-column-gap: 5px;
      	grid-row-gap: 5px;
      }
      
      • Antigua corta
      .container {
      	display: grid;
      	grid-template: repeat(3, 20px);
      	grid-gap: 5px 5px;
      }
      
      • Standard
      .container {
      	display: grid;
      	grid-template: repeat(3, 20px);
      	column-gap: 5px;
      	row-gap: 5px;
      }
      
      • Standard corta
      .container {
      	display: grid;
      	grid-template: repeat(3, 20px);
      	gap: 5px 5px;
      }
      
  • Tenemos el areas, para poder ubicar elementos de una manera más sencilla

.container {
	display: grid;
	grid-template: repeat(5, 20px) / repeat(5, 20px);
	grid-template-areas: 
		"header header header header header"
		"header header header header header"
		"main main . sidebar sidebar"
		"main main . sidebar sidebar"
		"footer footer footer footer sidebar"
}


*
La formas mas abreviada posible sería:
*

La función repeat() nos ayuda a no repetir. Esta recibe como parámetros el numero de veces y el valor que tendrá cada una
ej:

repeat(5, 20px)

Dejo este artículo por acá ya que viene al tema, está escrito por la autora que nos recomendó la profesora al inicio del curso, y es de una nueva implementación de grid que permite los layouts tipo pinterest, en donde se puede formar no una cuadrícula perfecta si no una cuadrícula con los espacios disponibles de los elementos:

https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Reto:
Diseño:

Diseño Grid

Notas de la clase

Recuerden que si el espaciado en igual en columnas y filas no es necesario escribir gap: 5px 5px solo hace falta poner gap: 5px, eso lo hace aún más simple.

Así determine mi layout para mi proyecto:

.grid {
  display: grid;
  grid-template-columns: 85px 185px 350px 220px 230px 635px 205px;
  grid-template-rows: 320px 160px 470px 415px 210px 210px 220px 250px;
  grid-gap: 3px;
}
Con la función repeat() podemos repetir un track un número de veces en lugar de definir cada columna y/o fila individualmente https://developer.mozilla.org/es/docs/Web/CSS/repeat()

Hola PlatziNautas,

De acuerdo al reto envío mi aporte al reto y espero sus comentarios.

Saludos!

Un aporte:

  • podemos usar repeat() cuantas veces deseamos:
    grid-template-columns: repeat(2, 50px) repeat(3, 100px) repeat(4, auto)
    (Con el código de arriba he creado 9 columnas. 2 columnas con 50 pixeles, 3 de 100px y 4 del espacio que sobra

No lo ví por aquí, pero para más práctica les dejo el famoso juego grid garden:
link

?Les comparto la identificación de mis contenedores:

mi reto:

Yo apenas estoy viendo los colores de mi proyecto…

My practice!

    display: grid;
    grid-template: repeat(5,20px)/repeat(5, 20px);

Tambien podemos usar la medida fr, que permite establecer la cantidad de espacio que ocupara un elemento dentro del área disponible, es decir, 1 fr es igual a una parte del espacio disponible, de esta manera podemos definir el espacio de ocupar cada elemento y la cantidad de columnas que tendrá el espacio. fr sería una medida flexible y px seria absoluta

Por ejemplo:

display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 2fr 1fr 1fr;


Info: https://www.programandoamedianoche.com/2019/05/guia-completa-para-aprender-a-utilizar-css-grid-layout/

a ver como sale

.container{
    display: grid;
    grid-column: repeat(4,20px)/repeat(6,20px);
}

Así lo organice 😄

.container {
display: grid;
grid-template-columns:repeat(5, 20px);
grid-template-rows: repeat(5, 20px);
}

Estas son mis contenedores, no logre darle las areas que querían en el medio, espero podamos verlo en las siguientes clases.

Este es el código que no me funciono, algo hice mal.

.container .container-hijo3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: 
    "area1 area1 area2 area3"
    "area1 area1 area2 area4";    
    background-color: #FF8C32;
}

para hacer una grilla se puede utiizar el siguiente codigo:
grid-template: repeat(4, 20px) / repeat(4, 20px);
esta linea de codigo crea una grilla de filas y columnas a la vez separada por un /

No conocia el concepto de areas en CSS pero veo que es muy util respecto a la posicion en el layout de nuestros contenedores.

Este curso es sencillamente genial, y su valor agregado radica en ir desbaratando todos los mitos que se tenian de css y su complejidad para convertirlos en algo digerible, sencillo y aplicable para nuestros futuros proyectos web.

Aporte:

Claro que hay una forma. Investigando encontre que cuando requerimos que se repita un patron usaremos la propiedad repeat()

En este ejemplo se puede apreciar mejor su implementacion

//antes

display: grid;
  grid-template-columns: 1fr 1fr 1fr;
//despues

display: grid;
  grid-template-columns: repeat(3, 1fr);

Esta es la explicacion mas corta, pero si quieren ir mas alla pueden revisar este enlace. Es asombroso como hay soluciones para cada situacion que pueda llegar a presentarse.

Enlace para aprender mas

La propiedad de repeat es demasiado util les recomiendo ver como funciona y aplicarla

Se tiene que user repetat();

funct repeat

Una manera que he visto para escribir grid-template-columns: 20px 20px 20px 20px 20pxp o grid-template-rows: 20px 20px 20px 20px 20px es utilizando la opción repeat así:
grid-template-columns: repeat(5, 20px) o grid-template-rows: repeat(5, 20px)

.container{
display:grid;
grid-template: repeat(5, 20px) / repeat(5, 20px);
}

Aqui dejo mi reto


Diseño Final:

Reto:

.container{
display: grid;
grid-templete-columns: repeat(5, 1fr)
grid-templete-rows: repeat(5, 1fr)
<code> 
.container{
	display: grid;
	grid-template-columns: repeat(5, 20px);
	grid-template-rows: repeat(5, 20px);
}

Es maravilloso Grid-template-areas. Lo conocí apenas empezando a saber sobre Grid con el curso básico de grid y lo amé. Me sorprendí la manera tan sencilla de poder crear un layout con esa propiedad y fue cuando pensé que estuve viviendo la ignorancia pensando que flexbox era lo mejor de grid

Bien, una vez que ya conocemos como podemos indicar que nuestro contenedor será grid, ahora hemos de asignar la cantidad de filas y columnas que queramos, esto lo hacemos con las siguientes funciones:

Grid-template-rows: tiene una sintaxis muy simple, se escribe el tamaño que queramos que tenga una fila, ejemplo:

	Grid-template-rows: 20px 20px 20px
	
	Esto nos dará como resultado una grilla con tres filas de 20px.
	
Grid-template-columns:  Funciona de manera similar a la propiedad  anterior, solo que en este caso estamos indicando el tamaño de las columnas.

Uso de repeat():  como hemos visto, al momento de armar nuestra grilla podríamos tener que llegar a escribir una gran cantidad de veces el mismo valor dependiendo de cuantas celdas tendrá esta, para esto podemos usar la propiedad repeat, que nos permite asignar el tamaño de las celdas y el número de celdas de manera rápida.

La sintaxis es la siguiente, primero se coloca el número de filas o columnas, dependiendo de en qué propiedad se aplique.

	Grid-template-columns: repeat(4,25px)
	
Grid-gap:  La propiedad grid gap nos permite definir si habrá algún tipo de espaciado entre las filas o columnas de nuestra grilla, para hacer esto tenemos las siguientes propiedades:

	Column-gap:  determina cuanto se separaran las columnas entre ellas.
	
	Row-gap: Determina cuanto se separaran las Filas entre ellas.
	
	Gap:  Indica cuanto se separaran, tanto filas como columnas entre ellas.
	
	Su sintaxis es muy simple, simplemente hemos de escribir cuanto espacio queremos entre nuestras celdas, pueden ser valores tanto absolutos como relativos:
	
		Gap: 25px;
		
Uso de grid-template-areas: Ahora que ya hemos definido nuestra grilla, podemos usar las áreas de grid para poder realizar de una manera más simple nuestros layout:

Su sintaxis es algo un poco extraño pero muy fácil de entender, le hemos de asignar a cada celda de nuestra grilla un nombre, el mismo nombre puede usarse en varias celdas para poder hacer un area, se realiza de la siguiente forma:

Suponiendo que tenemos una grilla de 3X3:

Grid-template-areas: "header header header"
			       "main main main"
			       "Footer Footer Footer"
			
Es importante que sepamos lo siguiente, las filas se separan entre si por las comillas, y cada valor dentro de esas comillas es una columna, el valor será erróneo si la forma en la que implementamos las áreas no da una forma rectangular.

TIP: Si queremos dejar partes de la grilla sin usar se puede usar un punto (".") para poder dejar esa celda vacía

Asignar áreas a elementos:  Una vez que tengamos áreas creadas la forma de asignársela a un elemento es muy simple, usamos la propiedad grid-area para indicarle cual ocupara:

Grid-area: header;

Primera Forma

display:grid;
grid-template-columns: repeat(5, 20px);
grid-template-columns: repeat(5, 20px) ;

Segunda Forma

display:grid;
grid-template-columns: repeat(5, 20px) / repeat(5, 20px) ;

La propiedad para hacerlo más sencillo es:

.container {
	display: grid;
	grid-template-colums: repeat(5, 20px);
	grid-template-rows: repeat(5, 20px);
}

Resultado:

Propuesta:

también se puede usar { grid-templates-columns: 1fr 1fr; } esto lo divide en fracciones y la medida seria relativa.

container{
grid-template-columns: repeat(5, 20px);
grid-template-rows: repeat(5,20px)
}

4 contenedores de 3x5 dentro de un contenedor más grande de 3x3

😃 Execelente clase aww Grid me acaba de cambiar la forma de ver y crear sitios web

.container{
display:grid;
grid-template-columns: repeat (5,20px);
grid-template-rows repeat(5,20px);
}
grid-template: grid-template-rows / grid-template-colums;
<.container{
  width: 100%;
  height: auto;
  display: grid;
  grid-template: 1fr 2fr 1fr / 1fr 3fr 2fr 3fr 3fr 1fr ;
  grid-gap: 2px 2px ;
}> 

Como puedo cambiar de parecer con los tamaños del grid, usé fr como unidad de medida.

CSS

  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);
display: grid;
grid-template-columns: repeat(5, 20px);
grid-template-rows: repeat(5, 20px);

Para no tener que escribir los mismos valores tantas veces sea necesario, podemos hacer uso de repeat().
Creo que podría quedar así:

.container{
	display: grid;
	grid-template-columns: repeat(4, 20px); 
	grid-template-rows: repeat(4, 20px); 
}
  • Reto

  • 4 filas y 5 columnas.

:root{
    --azul: #00425e;
    --black: rgb(24, 24, 24);
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
body{
    font-size: 1.6rem;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--black);
}
.hola{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template: repeat(4, 25%) / repeat(4, 25%);
    grid-template-areas:
    ".   .    .    .   "
    ".   logo logo menu"
    ".   logo logo menu"
    ".   .    .    .   ";
    width: 100%;
    height: 80px;
    font-size: 6rem;
    font-weight: 900;
    color: white;
    background-color: var(--azul);
}
.container {
    display: grid;
    grid-template: repeat(4, 20px) / repeat(4, 20px);
}```

Con la propiedad grid-template el orden para colocar nuestra grid es Filas / Columnas

![](

Asi va quedando el grid y el nombramiento de mi proyecto en las diferentes secciones:

Como inspiracion para mi proyecto voy a usar el layout de la derecha.

Esto fué lo que me inspiró en el concepto de naturaleza tambien y tomé las formas cuadradas

Reto:

woooooo

Aqui el reto del grid de mi Blog.

.container{
    display: grid;
    grid-template:repeat(5,100px) / repeat(5,100px);
    gap:20px 20px;
    grid-template-areas:
    "Header Header Header Header Header"
    "Slidebar . Block Block Block"
    "Slidebar . Block Block Block"
    "Slidebar . Block Block Block"
    "Footer Footer Footer Footer Footer"
}

Recordemos que las columnas serán de forma vertical y las
filas serán de forma horizontal.

Para poder crear columnas o filas, tendríamos que agregarle a nuestro elemento padre:

grid-template-columns: //COLUMNAS
grid-template-rows: //FILAS

Si queremos crear una Grid, de 5x5, donde cada valor sea de 20 pixeles, podríamos usar el código:

.container{
	display:grid;
	grid-template-columns: 20px 20px 20px 20px 20px;
	grid-template-rows: repeat(5, 20px);
}

Pero incluso, si queremos acortar el código mas, como lo vimos en ejemplo anterior, podremos poner valores que repitamos con la función:

Repat(nVeces, valor);

Tambien podremos acortar la selección de columnas y filas con (RECORDANDO QUE EMPEZAMOS POR FILAS Y DESPUES COLUMNAS:

.container{
	display:grid;
	grid-template:repeat(5,20px) / repeat(5,20px);
}

Si queremos que estas grid tengan espacios, podemos utilizar:

.container{
	display:grid;
	grid-template:repeat(5,20px) / repeat(5,20px);
	column-gap:5px;
	row-gap:5px;
}

Sin embargo, hay una forma mas corta de utilizarlo, que seria:

.container{
	display:grid;
	grid-template:repeat(5,20px) / repeat(5,20px);
	gap:5px 5px;
}

Tambien tenemos las Areas, que son nombres para poder saber en que parte ira cada cosa, esto se puede hacer de la siguiente forma:

.container{
	display:grid;
	grid-template:repeat(5,20px) / repeat(5,20px);
	grid-template-areas:
	"header header header header header"
	"header header header header header"
	"main   main    .    sliderbar slidebar"
	"main   main    .    sliderbar slidebar"
	"footer footer footer footer footer"
}

Good class. 💚

.grid-container{
    display: grid;
    grid-template: repeat(7,5rem) / repeat(5,10rem);
    grid-template-areas: 
    "header-left header-left . . stv"
    "header-left header-left . . stv"
    ". . . . ."
    ". . . . ."
    ". . . . ."
    ". . . . ."
    ". . . . .";
    gap: .5rem -5rem;
    
}


Aqui esta el aporte bbys

Para poder crear columnas

grid-template-columns

Para poder crear filas

grid-template-rows

ejemplo:

.container {
	display: grid;
	grid-template-columns: 20px 20px 20px 20px 20px;
	grid-template-rows: 20px 20px 20px 20px 20px;
}

La propiedad de gap, si queremos ese valor para columnas y filas, podemos escribirlo como:

gap: 5px;

Hoy en día he visto muchas páginas que ocupan el display:grid en el mismo body. Supongo que de esta manera estructuran o hacen el layout la página diviendo las secciones. Ejemplo:

body {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 100px 100vh repeat(4,auto) 200px;
}```

📙 Code

  <div class="container">
            <div class="item-1">🤡🤡🤡</div>
        </div>
.container {
    display: grid;
    grid-template: repeat(5, 200px) / repeat(5, 200px);
    /* gap: 20px 20px; */
    grid-template-areas: 
        "header header header header header"
        'header header header header header'
        'main main . sidebar sidebar'
        'main main . sidebar sidebar'
        'footer footer footer footer footer';
}

Con Repeat se pueden repetir los valores 😄

Bueno yo tome este pequeño ejemplo para ir creando mi proyecto.

Así es como lo dividí en los div padre

y este sería mi grid

Respondiendo la pregunta de la profesora, claro que sí, es:

grid-template-columns: repeat (5, 20px);
grid-template-rows: repeat (5, 20px);


Algo así pense para mi web

Se puede con:

.container {
display: grid;
grid-template: repeat(5, 20px) / repeat(5, 20px);
}

Pero me gusta más de la siguiente manera:

.container {
display: grid;
grid-template-columns: repeat(5, 20px);
grid-template-rows: repeat(5, 20px);
}

Considero que ambas formas son validas y como escuche alguna vez, “Nadie ira a tu casa a reclamarte el porque lo hiciste de una forma u otra”.

El valor es repeat(5, 20px)

hola una consulta, si deseo crear una tabla con dos columnas y 5 filas, alguien seria tan amable de explicarme como haria en html ya teniendo la explicacion de css

.container {
    display: grid;
    grid-template: repeat(5, 20px) / repeat(2, 20px);
          ↓ tamaño de la columna o fila
Repeat(5, 1fr);
       ↑ número de veces que se va repetir 

Bueno no es mi modelo xd pero con tal de trabajar en algo hice eso

.gridContainer
{
    display: grid;
    grid-template: 3.5rem 3rem 3rem 20rem 1rem 3rem 1rem 5rem 1rem 3rem 3rem  / 5% 90% 5% ;
    grid-template-areas: "header header header"
                         "news   news   news"
                         "admission admission admission"
                         "hero   hero   hero"
                         "titlenot titlenot titlenot"
                         "notice notice notice"
                         "titleteam titleteam titleteam"
                         "team   team   team"
                         "titlecont titlecont titlecont"
                         "contact contact contact"
                         "footer footer footer";

    border: 1px solid;
}```

Aqui tienen información de la función repeat para no escribir tantas veces el width de cada columna o fila

Lo mejor de hacer un sitio con grid y utilizar grid-template-areas es que al hacer tu sitio responsivo será tan fácil como cambiar el nombre de las áreas y algunas pequeñas modificaciones

Quiz: La respuesta es la letra C. Ya que tomara align-content y justify-content y las colocara en el centro tanto vertical como horizontal