Funciones especiales

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

Código Emmet

 div.contenedor>div.item.item-${$}*9

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

minmax

Nos ayuda a determinar el tamaño maximo para el tamaño de una celda

• La funcion recibe el tamaño minimo y el tamaño maximo de las filas o columnas

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,

• La funcion recibe, el numero de columnas o filas y su tamaño

grid-template-columns: repeat(3, 100px);

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.

Excelente funciones. La verdad me imaginaba cómo sería escribir 100 columnas, ¿tendría que escribir 100 pxs? Qué flojera jaja 😂😁

Este es uno de los mejores cursos que existe en la plataforma. muchas felicidades a la profesora @EstefanySalas

🤯👍

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

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.

Necesito ayuda 😦
No se que hice mal que no me pone los bordes de las celdas

en tailwind para repeat pueden aplicarlo asi

grid-rows-[repeat(3,100px)] 

el repeat siempre tan útil 😄

• minmax Esta función nos ayuda a declarar un tamaño mínimo y máximo para el ancho o alto de una celda. Podemos cambiar su tamaño sin depender del contenido que tienen.
• repeat Si todas las columnas o filas tienen el mismo ancho con esta función podemos darles el tamaño a las celdas en una solar declaración

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*/
	}

minmax nos permite establecer un tamaño minimo y maximo para el ancho de las columnas o alto de nuestras filas repeat(valor1, valor2) el primero nos indica la cantidad de veces a repetir y el segundo el alto o ancho que se desea

en tailwind para minmax pueden aplicarlo asi

grid-cols-[minmax(30px,300px)_200px_minmax(60px,150px)] 

Que me ayude la profe de lengua es por lo mismo que o por lo mismo de que y “por qué” 😃

.contenedor>.item.item-${$}*9

Funciones especiales: minmax declara un tamaño mínimo y máximo para el tamaño de una celda, sin depender del contenido que tiene.

Comparto este video donde explican como sacarle el maximo provecho a emmet: Video emmet

Hace rato venia viendo aportes que dejan el codigo, quienes aun no lo dominan tomense unos minutos y veanlo, realmente no tiene desperdicio.

La clase más sencilla de todas las de Platzi, gracias.