Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Funciones especiales

6/13
Recursos

Aportes 11

Preguntas 2

Ordenar por:

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

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

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

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

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

🤯👍

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

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


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