CSS Grid: Uso de fr, minContent, maxContent, autofill y autofit

Contenido del curso

Introducción a Grid

Propiedades de Grid

Power ups de Grid

Proyecto

Bonus

12
Creación de Diseños Responsivos con CSS Grid
09:21 min

Próximos pasos

13
Especificación de CSS Grid: Curso Final y Próximos Pasos
00:30 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:54

CSS Grid: Uso de fr, minContent, maxContent, autofill y autofit

Curso de CSS Grid Básico

Clase 7 de 13

Clase 7 / 13

Comentarios (53)53 comentarios

Dylan Peralta

Hace 5 años

KEYWORDS ESPECIALES

fr : Es una unidad de medida especial de css grid para darle ancho o alto a filas y columnas 1fr representa una fraccion del total de columnas o filas.
min-content : Ajusta el ancho de la celda lo mínimo posible sin romper su contenido.
max-content : Ajusta el ancho de la celda lo máximo posible para mostrar su contenido.
auto-fill : Agrega columnas “fantasma” que rellenan el espacio sobrante del contenedor.
auto-fit : Ensancha las columnas para que ocupen todo el espacio del contenedor.

auto-fill y auto-fit ayudan a la grilla a ocupar el 100% del espacio disponible.

Ricardo Antonio Ixchajchal Hernández

Hace 5 años

Gracias por el aporte

Joel Dominguez Merino

Hace 5 años

Muy buen resumen @Dylan, gracias!

Camilo Perilla

Hace 5 años

min-content hará que nuestro contenido haga salto de linea en cada oportunidad que tenga, siendo tan ancho como la palabra mas larga. max-content no tendrá salto de linea, ocupando todo el ancho que pueda, incluso causando overflow.

Luis Berenguer

Hace 5 años

Buen dato!

Rafael Martínez Rodríguez

Hace 4 años

Gracias por la información.

Reinaldo Mendoza

Hace 5 años

Siento como si me estuviese explicando una amiga, super sencillo y la profe super natural, que cool

Luis Antonio Vargas Avila

Hace 5 años

Algo que creo que faltó mencionar, es que el número de filas/columnas al usar auto-fill y auto-fit está determinado por el número de elementos dentro del contenedor de la grid.

Eddie Mora

Hace 4 años

Yeins David Llano Hernández

Hace 5 años

estoy amando este curso, creo que es el mas y mejor explicado y estructurado de los que he visto.

Griger Ratia

Hace 5 años

Poco a poco...

Antonio Mora

Hace 4 años

Juan Gui Arenas

Hace 5 años

Keyword Especiales

Fr : Es una unidad de medida especial de css grid para darle ancho o alto a filas y columnas 1fr representa una fraccion del total de columnas o filas.
min-content: Ajusta el ancho de la columna si romper el contenido de esta columna
max-content: crecer la filas para que el contendio se pueda ver lo mas amplio posible
auto-fil: Agrega columnas fantasma que rellan el espacio
auto-fit: Hace crecer las columnas que ya tenemos para que ocupen el 100%

Jesús Lautaro Careglio Albornoz

Hace 5 años

auto-fit y auto-fill

++auto-fit:++ intenta crear nuevas columnas siempre que cuente con el espacio, sin embargo, si el contenido es vacío hace que las columnas que si tienen contenido se expandan (siempre que sea posible ocupando el espacio disponible)
++auto-fill:++ intenta crear nuevas columnas siempre que cuente con el espacio, sin embargo, si el contenido es vacío hace que ellas aunque no existan, ocupen el espacio como si existieran

Kevin Orellana

Hace 5 años

Grasias amigo

Reinaldo Mendoza

Hace 5 años

Excelente resumen, eran las dos mas complicadas de entender

Eduardo Pérez Suárez

Hace 5 años

Hola, dejo esta página donde muestran más ejemplos de css grid.

https://ishadeed.com/article/css-grid-minmax/

Christian Velázquez

Hace 5 años

En algún momento, se me hacía muy "complejo" ponerlo dentro de un proyecto; por lo "Responsive". Gracias Platzi, por hacer el código más fácil.

Juan Pablo Rios Guevara

Hace 5 años

Alejandro Ivan Mendieta

Hace 5 años

🖐 No me ha quedado del todo claro el fr, entiendo que mantiene la proporción y tal, pero cuando ponemos por ejemplo grid-template-columns:1fr 3fr 4fr; ¿Qué significan esos 3 y 4fr, es decir, de donde toma la referencia para asignarles un tamaño? 🤔

Fernando Alejandro Yerena Ramos

Hace 5 años

¡Hola, @Ivi_Mendieta! 🤓 🍍 🍍 Más qué mantener la proporción, fr nos ayuda a dividir la grilla de una forma más clara.

fr toma de referencia el ancho y alto disponible en nuestra grilla. En el ejemplo que planteas lo que hace es dividir la grilla en octavos. ¿Por qué? Es el total de sumar las fracciones (fr) . Entonces la primera columna ocuparía 1/8, la segunda columna 3/8 y la tercera 4/8 del ancho disponible.

Sí la grilla tuviera 800px de ancho disponible, la primera columna tendría 100px (1/8) de ancho, la segunda 300px (3/8) y la tercera 400px (4/8) respectivamente. 🤓🍍🍍

Cristian Acevedo

Hace 4 años

del contenedor por eso es muy bueno para responsive desig :)

Paul Francis

Hace 4 años

A ¿cuanto equivale un 1fr en pixeles?🤔

Mauricio Bustos

Hace 4 años

Depende de la cantidad de elementos y es relativo al contenedor. Si el contenedor mide 300px y lo dividis en 1fr 1fr 1fr; debería medir 100px cada columna. Hay que tener en cuenta margin, gap, border y demás configuraciones por supuesto. De igual manera, si el contenedor mide 300px y lo dividis en 1fr 2fr; lo seguís dividiendo en 3, solo que ahora la columna/fila que mide 1fr va a medir 100px y la que mide 2fr va a medir el doble, es decir 200px. Espero no haberte mareado y haberlo entendido bien yo tambien.

Olga Berenice Hernández Cruz

Hace 4 años

Hola, les comparto mi apunte completo de esta clase: 👉🏼 aquí

Raúl Adolfo Sánchez Rodríguez

Hace 4 años

px vs fr

Aspecto teórico de 1 fracción (1fr)
Al formar 4 columnas, comparemos si el ancho es 100px c/una y si el ancho es 1fr
Al formar 4 columnas, comparemos si el ancho es 1fr cada una o toma distinto valores de fr

fr vs min-content

Aspecto teórico de min-content y max-content
Comparemos cuando el ancho de la columna 3 es 1fr y min-content

fr vs min-content vs max-content

Comparemos cuando el ancho de la columna 3 es 1fr , min-content y max-content

fr vs auto-fit vs auto-fill

Aspecto teórico
Comparemos cuando tenemos 4 columnas y el ancho está determinado por fr , auto-fit y auto-fill
Comparemos cuando tenemos 4 columnas y el ancho está determinado por fr , auto-fit y auto-fill y se comprime el ancho de la pantalla

Jhoan Camilo Velásquez Muñoz

Hace 3 años

Muy buenas tus anotaciones bro, Super practicas

Alexandra Gabriela

Hace 3 años

Super útiles 👍

Facundo Peralta

Hace 4 años

Este curso me ha cambiado la vida, me sentía re perdido con CSS Grid ahora entiendo todo super claro ♥

Ana Shek

Hace 5 años

Los fr son medidas relativas y el min-content/max-content son medidas absolutas (son fijos)
Cuando se usa auto-fit o un auto-fill se necesita declarar un minmax

Alejandra Espinosa

Hace 5 años

La Unidad fr Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Más info

Daniela Angulo Ruiz

Hace 3 años

Keywords especiales:

fr: fracción
min-content: ajusta el ancho de la celda para que se tenga un valor de celda mínimo sin que el contenido se desorganice.
max-content: permite ensanchar la columna para que el contenido se vea más grande

auto-fill/auto-fit: ayuda a que la grilla ocupe la totalidad del espacio disponible. Mientras que auto-fill crea columnas fantasmas para completar el ancho completo de la grilla, auto-fill ensancha las columnas para lograr ese mismo propósito.

Recursos

CSS tiene varias palabras claves que suelen resultar muy útiles al momento de crear código. Veamos algunas de ellas:

Palabras clave especiales para creación de código

fr : es una unidad relativamente nueva de medida especial de CSS Grid para darle ancho o alto a filas y columnas. 1fr representa una fracción del total de columnas o filas.
min-content : ajusta el ancho de la celda lo mínimo posible sin romper su contenido.
max-content : ajusta el ancho de la celda lo máximo posible para mostrar su contenido.
auto-fill : logra que la grilla ocupe el 100% del espacio que tiene. Agrega columnas “fantasma” que rellenan el espacio sobrante del contenedor.
auto-fit : ensancha las columnas para que ocupen todo el espacio del contenedor.
auto-fill y auto-fit: ayudan a la grilla a ocupar el 100% del espacio disponible.

Cómo funcionan las palabras clave especiales

Veamos cómo funcionan estas keywords directamente en el código: Primero, creamos un index.html con cuatro contenedores. Llevando el 3 y 4 distintas mezclas y espaciados.

<div class=""contenedor"">
<div class=""item item-1"">1</div>
<div class=""item item-2"">2</div>
<div class=""item item-3"">3 3 33 3 3 3 3 3 3 3 3 3 3 33333 3333 333</div>
<div class=""item item-4"">444 4 4 4 4 4 4 4 4 4444 4444 44 4 4 4 4</div>
</div>

Luego aplicamos en los estilos: Cuatro columnas de 100px sin especificar su alto.

.contenedor {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
    grid-template-columns: repeat(4, 100px);
  }
  
.item {
    border: 5px solid #00bcd4;
    font-size: 2rem;
  }

En el navegador observamos que todas las columnas tienen el mismo ancho.

Piensa en las columnas como fracciones: si la grilla tiene 4 columnas, todas del mismo ancho, cada columna es igual a una fracción de la grilla. Entonces, si en vez de colocar 100px de ancho, colocamos 1fr, logramos que cada columna siempre tenga el mismo ancho, ocupando siempre el 100% del ancho de la pantalla.

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

También podemos agregar distintos valores proporcionales al ancho de la columa. Por ejemplo, podemos hacer que una columna sea del doble de ancho de la anterior, y así con las demás.

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

Podemos cambiar una sola columna para que use el ancho mínimo que ocupa su contenido con min-content. De esta manera, al redimensionar la pantalla, el ancho de las demás columnas cambiará, pero el de la modificada no, porque ya ocupa el ancho mínimo desde el principio.

grid-template-columns: 1fr 3fr min-content 2fr;

Lo mismo pasa si queremos que la celda use el ancho máximo. Tomará el espacio necesario para mostrar su contenido en una sola línea.

grid-template-columns: 1fr 3fr max-content 2fr;

Para explicar el auto-fill y auto-fit, creemos otro contenedor.

    <div class=""contenedor-1"">
        <div class=""item item-1"">1</div>
        <div class=""item item-2"">2</div>
        <div class=""item item-3"">3</div>
        <div class=""item item-4"">4</div>
    </div>
    <div class=""contenedor-2"">
        <div class=""item item-1"">1</div>
        <div class=""item item-2"">2</div>
        <div class=""item item-3"">3</div>
        <div class=""item item-4"">4</div>
    </div>

Aplicamos estilos:

.contenedor-1 {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .contenedor-2 {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
    margin-top: 100px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

Para que funcione, es necesario especificar el ancho mínimo y máximo del contenedor. En este caso queremos que comience desde 100px y crezca hasta llegar a una fracción de la grilla. No colocamos valores absolutos para que el contenedor siempre se ajuste al ancho de la pantalla.

Como vemos en la grilla con auto-fit las columnas se expanden hasta ocupar todo el ancho. Mientras que en auto-fill se agregan columnas fantasma para rellenar el espacio faltante. Sin embargo, al reducir el tamaño vuelven a ocupar el mismo espacio mínimo.

Has aprendido bastante sobre CSS Grid, ¡ahora vamos a implementarlo a un proyecto!

Contribución creada por: José Miguel Ventimilla (Platzi Contributor).

Resumen

CSS tiene varias palabras claves que suelen resultar muy útiles al momento de crear código. Veamos algunas de ellas:

Palabras clave especiales para creación de código

fr : es una unidad relativamente nueva de medida especial de CSS Grid para darle ancho o alto a filas y columnas. 1fr representa una fracción del total de columnas o filas.
min-content : ajusta el ancho de la celda lo mínimo posible sin romper su contenido.
max-content : ajusta el ancho de la celda lo máximo posible para mostrar su contenido.
auto-fill : logra que la grilla ocupe el 100% del espacio que tiene. Agrega columnas “fantasma” que rellenan el espacio sobrante del contenedor.
auto-fit : ensancha las columnas para que ocupen todo el espacio del contenedor.
auto-fill y auto-fit: ayudan a la grilla a ocupar el 100% del espacio disponible.

Cómo funcionan las palabras clave especiales

Veamos cómo funcionan estas keywords directamente en el código: Primero, creamos un index.html con cuatro contenedores. Llevando el 3 y 4 distintas mezclas y espaciados.

<div class=""contenedor"">
<div class=""item item-1"">1</div>
<div class=""item item-2"">2</div>
<div class=""item item-3"">3 3 33 3 3 3 3 3 3 3 3 3 3 33333 3333 333</div>
<div class=""item item-4"">444 4 4 4 4 4 4 4 4 4444 4444 44 4 4 4 4</div>
</div>

Luego aplicamos en los estilos: Cuatro columnas de 100px sin especificar su alto.

.contenedor {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
    grid-template-columns: repeat(4, 100px);
  }
  
.item {
    border: 5px solid #00bcd4;
    font-size: 2rem;
  }

En el navegador observamos que todas las columnas tienen el mismo ancho.

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

También podemos agregar distintos valores proporcionales al ancho de la columa. Por ejemplo, podemos hacer que una columna sea del doble de ancho de la anterior, y así con las demás.

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

grid-template-columns: 1fr 3fr min-content 2fr;

Lo mismo pasa si queremos que la celda use el ancho máximo. Tomará el espacio necesario para mostrar su contenido en una sola línea.

grid-template-columns: 1fr 3fr max-content 2fr;

Para explicar el auto-fill y auto-fit, creemos otro contenedor.

    <div class=""contenedor-1"">
        <div class=""item item-1"">1</div>
        <div class=""item item-2"">2</div>
        <div class=""item item-3"">3</div>
        <div class=""item item-4"">4</div>
    </div>
    <div class=""contenedor-2"">
        <div class=""item item-1"">1</div>
        <div class=""item item-2"">2</div>
        <div class=""item item-3"">3</div>
        <div class=""item item-4"">4</div>
    </div>

Aplicamos estilos:

.contenedor-1 {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .contenedor-2 {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
    margin-top: 100px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

Has aprendido bastante sobre CSS Grid, ¡ahora vamos a implementarlo a un proyecto!

Contribución creada por: José Miguel Ventimilla (Platzi Contributor).

Introducción a Grid

CSS Grid Layout: Crea Diseños Web Dinámicos

Conceptos básicos de CSS Grid Layout

Propiedades de Grid

Creación de Grillas con CSS Grid: Propiedades y Ejemplos Prácticos

Propiedades de Alineación en CSS Grid

Ubicación de Elementos en CSS Grid: Grid Column, Grid Row y Grid Area

Power ups de Grid

Funciones avanzadas de CSS Grid: minmax y repeat

CSS Grid: Uso de fr, minContent, maxContent, autofill y autofit

Proyecto

Diseño de Grillas para Páginas Web de Comida

Maquetación de Sección con Grid en HTML y CSS

Maquetación de Grillas y Estilos CSS en Proyectos Web

Creación de Grilla de Menú en HTML y CSS

Bonus

Creación de Diseños Responsivos con CSS Grid

Próximos pasos

Especificación de CSS Grid: Curso Final y Próximos Pasos

CSS Grid: Uso de fr, minContent, maxContent, autofill y autofit

Progreso del curso

Introducción a Grid

Propiedades de Grid

Power ups de Grid

Proyecto

Bonus

Próximos pasos

Recursos

Recursos