Keywords especiales

Curso de CSS Grid Básico

Introducción a Grid

¿Qué es CSS Grid Layout?

Conceptos para comenzar

Propiedades de Grid

Propiedades del contenedor

Propiedades de alineación

Propiedades de ubicación

Power ups de Grid

Funciones especiales

Keywords especiales

Proyecto

Hagamos nuestra primera sección

Creando la grilla con área

Armando el listado

Bonus

¿Cómo hacer nuestro proyecto responsivo?

Próximos pasos

Más cursos de CSS Grid

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

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

Aportes 45

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Dylan Peralta

hace 3 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.

Camilo Perilla

hace 3 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.

Reinaldo Omar Mendoza Leal

hace 3 años

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

Luis Antonio Vargas Avila

hace 3 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.

Yeins David Llano Hernández

hace 3 años

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

Griger Ratia

hace 3 años

Poco a poco…

Antonio Mora