Funciones avanzadas de CSS Grid: minmax y repeat
Contenido del curso
Funciones avanzadas de CSS Grid: minmax y repeat
Contenido del curso
Juan Gui Arenas
Raul Romero
Rafael Martínez Rodríguez
Jose Luis Grande Acevedo
Platzi Team
Beder Danilo Casa Condori
Ieesus Steve Chumpitaz Castillo
Hector Davila
José M. Veintimilla
Platzi Team
Beder Danilo Casa Condori
Rafael Martínez Rodríguez
Enrique López
Alfred Manolo Vasquez Lozano
Jonathan Castillo Flores
Jesús Lautaro Careglio Albornoz
Edgar Benjamin Tzul Tacam
Daniela Angulo Ruiz
Eduardo Peña Ramos
iecgerman .
Eduardo Peña Ramos
Meritxell Valadez
Lautaro Agustin Barrera
Meritxell Valadez
Roberto Carlos Moreira España
Seba Cardoso
Vladimir Farrera Vera
----- ----
Santiago Rodriguez Chaves
José Rubio
Sergio Corzo
Diego Edilberto Novoa Cortes
Max Felipe Hess Alvarez
Javier Marin Ayza
Edwin Adrian Borrero Arias
Eduardo Peña Ramos
Funciones especiales
minmax: ayuda a declarar el tamaño minimo y maximo para el ancho y alto de una celda, sin depender del contenido que tengamos en ella
repeat : se usa cuando todas las columnas o filas tienen el msmo ancho y evitar repetir el tamaño de las columnas
gracias por el aporte @juan 😄.
Muchas gracias
Código Emmet
div.contenedor>div.item.item-${$}*9
Genial🔥🔥🔥
interesante
++También se puede anidar para reducir código:++
grid-template-columns: repeat(3,minmax(50px,170px));
y asi evitaste hacer esto:
grid-template-columns: minmax(50px,170px) minmax(50px,170px) minmax(50px,170px);
Justo estaba checando los aportes para ver si nadie lo había aportado jejeje.
Buena observación.
minmax
Nos ayuda a determinar el tamaño maximo para el tamaño de una celda
grid-template-rows: minmax(30px, 100px);
repeat
Nos permite definir el tamaño de las columnas si tener que escribirlo por el numero de columnas de nuestra grilla,
grid-template-columns: repeat(3, 100px);
cierto
Muchas gracias.
Me ha encantado este curso, la forma de explicar de la profe es excelente! muy práctica, en otro curso a puras capturas no había comprendido.
de acuerdo 100%, es muy fácil entender y aplicar los conceptos con este genial sistema de enseñar. felicitaciones profesora Estefany Salas.
Excelente funciones. La verdad me imaginaba cómo sería escribir 100 columnas, ¿tendría que escribir 100 pxs? Qué flojera jaja 😂😁
🤯👍
.contenedor { border: 5px solid #e1bee7; background-color: #fff1ff; display: grid; grid-template-columns: minmax(30px, 300px) 200px 60px; grid-template-rows: auto repeat(2, 150px); } .item { border: 5px solid #00bcd4; font-size: 2rem; } .contenedor-2 { margin-top: 100px; border: 5px solid #7986cb; background-color: #c5cae9; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
Este es uno de los mejores cursos que existe en la plataforma. muchas felicidades a la profesora @EstefanySalas
Funciones especiales:
Nota. La propiedad auto permite hacer que la columna o la fila adapte su tamaño a su contenido.
A mi no se me rompe o desborda el contenido como a la maestra. No sé de qué dependa. Llega un momento en que al redimensionar el navegador, la tabla ya no se hace más chica para que quepa el contenido.
borra el caché del chrome
¡Gracias por el tip, Germán! :)
Necesito ayuda :( No se que hice mal que no me pone los bordes de las celdas
Hola! No se aplican tus estilos por que las clases de HTML y CSS no coinciden. En el HTML cambia las clases por "item" y listo 👍
Aah ya veo Muchas gracias!!
Me encanta la programación
A mi tambien
en tailwind para repeat pueden aplicarlo asi
grid-rows-[repeat(3,100px)]
el repeat siempre tan útil :D
Funciones especiales minmax(valor_mínimo, valor_máximo): sirve para poner un valor mínimo y máximo de tamaño a las celdas. Repeat(nºveces,valor): repite las veces indicadas un valor dado.
minmax: esta función nos permite definir un valor mínimo y máximo del alto y ancho de una celda.
Ejemplo:
grid-template-columns: minmax(30px, 300px; /Definimos lineas de columnas de tamaño mínimo de 30px y tamaño máximo de 300px/
repeat: nos permite crear n columnas o celdas del mismo tamaño. Recibe 2 parámetros, la cantidad de filas o columnas y el tamaño que tendrán
Ejemplo:
.container{ display: grid; grid-template-rows: repeat( 3, 150px);/*Definimos 3 lineas de filas de 150px*/ }
Podemos usar la función minmax dentro de la función repeat, así:
.container{ display: grid; grid-template-rows: repeat( 3, minmax(30px, 150px) );/*Definimos 3 lineas de filas de tamaño mínimo de 30px y de tamaño máximo de 150px*/ }
excelente clase
Hola tengo la duda acerca de el layout y el html semantico, como puedo aplicar html semantico si quiero tener un grid layout para mi body, me explico.
si tengo un : header main footer
estos van dentro de un div para realizar el grid algo como:
<body> <div class="container-grid"> <header></header> <aside></aside> <main></main> <footer></footer> </div> <body/>
algo asi seria o hay una manera mejor, no tengo mucho conocimiento acerca de las buenas practicas en grid y html semantico, de antemano muchas gracias
No se si lo has solventado pero Max se hace del mismo modo, pero en vez de los div.item tienes las etiquetas semanticas. A mi me resulta más fácil hacerlo con template creo que es más aclaratorio pero de la otra forma también se puede realizar.
.container-grid { border: 5px solid #e1bee7; background-color: #3a630b; display: grid; grid-template-columns: 150px 150px 150px; grid-auto-rows: 150px; gap: 20px; justify-content: center; grid-template-areas: "header header header" "aside main main" "aside main main" "footer footer footer"; } .item { border: 5px solid #add901; background-color: #61a81e; font-size: 4rem; } header { grid-area: header; } aside { grid-area: aside; } main { grid-area: main; } footer { grid-area: footer; }
He puesto también la clase item en las etiquetas semanticas para poder ver bien los límites de cada celda.
<div class="container-grid"> <header class="item">header</header> <aside class="item">aside</aside> <main class="item">main</main> <footer class="item">footer</footer> </div>
Por que la profesora dejo el 200px entre los minmax? eso signifca algo
Porque de las 3 columnas, la de enmedio (de 200px de ancho), solo tiene un número en su contenido. Y al redimensionar haciendo más pequeñas las columnas, no tienen tanto problema de desbordamiento de contenido.
