Al crear un sitio web, gran parte del trabajo consiste en disponer co­rre­c­ta­me­n­te los distintos elementos que la componen. El diseño debe ser atractivo, pero claro al mismo tiempo, y se debe co­m­pre­n­der de forma intuitiva. Las hojas de estilo en cascada (CSS) co­n­s­ti­tu­yen una he­rra­mie­n­ta para diseñar sitios web con esas ca­ra­c­te­rí­s­ti­cas. Mientras que HTML muestra el contenido de forma ru­di­me­n­ta­ria, CSS es apto para diseños complejos. La te­c­no­lo­gía de la web está en constante de­sa­rro­llo y ahora, con CSS3, han aparecido técnicas nuevas que permiten aplicar el lenguaje en el Internet móvil y utilizar el diseño re­s­po­n­si­vo.

¿Por qué se usa CSS grid layout?

El internet móvil presenta un gran número de desafíos para los di­se­ña­do­res de páginas web: debido a la enorme variedad de diseños de los di­s­po­si­ti­vos móviles, es imposible saber qué formato tiene la pantalla en la que se vi­sua­li­za­rá el contenido web. Por esto, es esencial que los elementos in­di­vi­dua­les (cajas de texto, gráficos, elementos in­ter­ac­ti­vos) se di­s­tri­bu­yan de forma in­de­pe­n­die­n­te y al mismo tiempo de forma clara, teniendo en mente las re­s­pe­c­ti­vas co­n­di­cio­nes de espacio dadas por cada pantalla.

Hace un tiempo se trabajaba con los llamados floats, pero es una técnica compleja que daba lugar a muchos errores. Hoy los di­se­ña­do­res cuentan con dos métodos para im­ple­me­n­tar un diseño dinámico: además de CSS grid, también se puede usar Flexbox. Sin embargo, las dos técnicas difieren en algunos aspectos.

Flexbox es uni­di­me­n­sio­nal. Esto quiere decir que los elementos solo se pueden mover a lo largo de un eje. En cambio, un diseño CSS grid ofrece al diseñador web dos di­me­n­sio­nes para la co­lo­ca­ción de los objetos porque, en lugar de solo un eje, permite crear una rejilla con filas y columnas.

CSS grid: tutorial con ejemplos

Las personas que sepan usar CSS no tendrán problemas con grid. En el siguiente tutorial, te ex­pli­ca­mos las funciones más im­po­r­ta­n­tes para que des tus primeros pasos con esta pla­ta­fo­r­ma.

Nota

Nuestro tutorial funciona con un solo archivo: el código CSS se escribe en el en­ca­be­za­do del archivo HTML. También es posible crear una hoja de estilo separada y acceder a esta desde el archivo HTML.

Crear co­n­te­ne­do­res y elementos

CSS grid emplea dos unidades di­fe­re­n­tes: co­n­te­ne­do­res y elementos. El co­n­te­ne­dor es el nivel superior y en él se definen las pro­pie­da­des que luego tendrán todos los elementos. Desde un punto de vista je­rá­r­qui­co, un elemento está dentro de un co­n­te­ne­dor. Además de eso, se sigue ne­ce­si­ta­n­do HTML para el diseño de la rejilla o grid. En la parte HTML del código fuente, se crean los elementos in­di­vi­dua­les (texto, gráficos, etc.), que luego se recogen dentro de CSS grid y se disponen en la posición correcta.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
    display: grid;
}
</style>
</head>
<body>
<div class="grid-container">
    <div class="grid-item1">1</div>
    <div class="grid-item2">2</div>
    <div class="grid-item3">3</div>
    <div class="grid-item4">4</div>
    <div class="grid-item5">5</div>
    <div class="grid-item6">6</div>
</div>
</body>
</html>

De este modo, hemos creado seis elementos, hemos definido cada uno de ellos como grid-item y los hemos em­pa­que­ta­do en el grid-container. Para activar CSS grid, tienes que iniciar la función en el co­n­te­ne­dor con display: grid. El código generará úni­ca­me­n­te 6 números, que apa­re­ce­rán uno debajo del otro. Después de crearlos, pueden colocarse con relativa libertad en la pantalla.

Rejilla, columnas y filas

Con CSS grid layout, se trabaja con filas y columnas para crear una cua­drí­cu­la, en la cual se colocan y di­s­tri­bu­yen los distintos elementos. El usuario es quien decide el tamaño de las filas y las columnas, añadiendo las pre­fe­re­n­cias al co­n­te­ne­dor.

.grid-container {
    display: grid;
    grid-template-rows: 100px; 100px
    grid-template-columns: 100px; 100px; 100px;
}

Con estos dos comandos hemos abierto una cua­drí­cu­la de 2 por 3. Como puedes ver, el tamaño de cada fila y columna se puede definir por separado. Los datos se indican de forma sucesiva (separados por un punto y coma y un espacio). Además de la in­fo­r­ma­ción exacta de los píxeles, también puedes usar po­r­ce­n­ta­jes u otras unidades que son comunes en CSS. Las es­pe­ci­fi­ca­cio­nes max-content y min-content permiten crear una cua­drí­cu­la según el contenido.

La opción grid-gap crea un espacio vacío.

.grid-container {
    display: grid;
    grid-template-rows: 100px; 100px;
    grid-template-columns: 100px; 100px; 100px;
    grid-gap: 5px;
}

Con este código, las celdas quedarán separadas con espacios uniformes. Si no quieres un espaciado uniforme, puedes usar grid-column-gap y grid-row-gap para pe­r­so­na­li­zar el tamaño de los espacios.

Las fra­c­cio­nes son una función especial. Esta unidad de medida permite dividir la pantalla en secciones di­fe­re­n­tes. Por ejemplo, ima­gi­ne­mos que queremos dividirla en 7 unidades ho­ri­zo­n­ta­les, teniendo una de las columnas el doble del tamaño de las otras. Para ello, puedes usar este código:

.grid-container {
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
    grid-gap: 5px;
}
Imagen: Uso de fracciones en CSS grid
El CSS grid layout permite crear columnas y filas de distintos tamaños.

La ventaja de trabajar con tamaños relativos en lugar de es­pe­ci­fi­ca­cio­nes estáticas es que la cua­drí­cu­la puede adaptarse au­to­má­ti­ca­me­n­te al tamaño de la pantalla. Aunque las columnas tengan que modificar su tamaño, la segunda columna (en nuestro ejemplo) siempre será dos veces más grande que las otras. Si quieres fijar una fila, es decir, no adaptarla al tamaño de la pantalla, debes asignarle un valor estático.

Di­s­po­si­ción de los elementos

Después de definir la rejilla, se colocan en ella los elementos. Para esto, primero tienes que crear los elementos y también es­pe­ci­fi­car los valores de inicio y fin. No obstante, no todos los elementos tienen que ocupar ne­ce­sa­ria­me­n­te una sola celda dentro de la cua­drí­cu­la.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
    display: grid;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-columns: 100px 100px 100px 100px;
    grid-gap: 5px;
}
.grid-item1 {
    background: blue;
    text-align: center;
    border: black 5px solid;
    grid-column-start: 1; 
    grid-column-end: 5; 
    grid-row-start: 1; 
    grid-row-end: 3;
}
.grid-item2 {
    background: grey;
    text-align: center;
    border: black 5px solid;
}
</style>
</head>
<body>
<div class="grid-container">
    <div class="grid-item1">1</div>
    <div class="grid-item2">2</div>
    <div class="grid-item2">3</div>
    <div class="grid-item2">4</div>
    <div class="grid-item2">5</div>
    <div class="grid-item2">6</div>
</div>
</body>
</html>
Imagen: CSS grid con elementos de distintos tamaños
El primer elemento ocupa cuatro filas y dos columnas.

Hasta ahora hemos hablado de dos tipos de elementos. Mientras que los últimos cinco elementos solo ocupan una celda, el primer elemento se extiende sobre cuatro columnas y dos filas (para mayor claridad, hemos variado el diseño de los elementos en nuestro ejemplo, pero en un CSS grid no se define el color, los bordes o la sangría de los textos).

Los valores del principio y el final de los elementos se refieren de forma indirecta a las filas y columnas, porque, de hecho, se refiere a la fila re­s­pe­c­ti­va de la rejilla. En el ejemplo, la cuarta columna termina con la quinta línea. Sin embargo, tienes varias opciones para es­pe­ci­fi­car los rangos.

  • Nu­me­ra­ción: las líneas se cuentan de izquierda a derecha y de arriba a abajo.
  • Nombres: dentro de grid-template-rows y grid-template-columns se puede poner nombres a las líneas (entre corchetes) y luego referirse a estos nombres.
  • Alcance: con span se indica cuántas celdas debe co­m­pre­n­der el objeto en una de­te­r­mi­na­da dirección.

En lugar de definir los puntos de inicio y final en comandos separados, los di­se­ña­do­res web pueden combinar ambos bajo uno solo. El siguiente código te dará el resultado del ejemplo anterior:

<style>
.grid-container {
    display: grid;
    grid-template-rows: 100px [Line1] 100px [Line2] 100px [Line3] 100px [Line4];
    grid-template-columns: 100px 100px 100px 100px;
    grid-gap: 5px;
}
.grid-item1 {
    background: blue;
    text-align: center;
    border: black 5px solid;
    grid-column: 1 / span 4;
    grid-row: 1 / Line2; 
}
.grid-item2 {
    background: grey;
    text-align: center;
    border: black 5px solid;
}
</style>

Asi­g­na­ción de áreas

CSS grid layout permite combinar celdas en áreas y no­m­brar­las. Esto facilita la tarea de dividir los elementos en la rejilla. Los ajustes para esto se hacen en el co­n­te­ne­dor. Para ello, usa el comando grid-template-areas y escribe los nombres de las áreas deseadas en las celdas línea por línea. Si no quieres asignar una celda y dejarla en blanco, puedes insertar un punto en esta ubicación. Cada fila queda en­tre­co­mi­lla­da.

.grid-container {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
    grid-template-areas:
    "area1 area1 area1 area1 area1"
    "area2 area2 . area3 area3"
    "area2 area2 area4 area4 area4";
}

En este ejemplo, hemos definido 4 áreas di­fe­re­n­tes. Una celda se ha dejado en blanco. Para definir los elementos, ya no será necesario es­pe­ci­fi­car los valores desde-hasta. Basta con re­fe­re­n­ciar el área co­rre­s­po­n­die­n­te.

.grid-item1 {
    background: blue;
    text-align: center;
    border: black 5px solid;
    grid-area: area1;
}
.grid-item2 {
    background: red;
    text-align: center;
    border: black 5px solid;
    grid-area: area2;
}
.grid-item3 {
    background: green;
    text-align: center;
    border: black 5px solid;
    grid-area: area3;
}
.grid-item4 {
    background: yellow;
    text-align: center;
    border: black 5px solid;
    grid-area: area4;
}
Imagen: CSS grid con áreas
Usar áreas para la asi­g­na­ción de objetos te fa­ci­li­ta­rá mucho la tarea.

Ajustar la ali­nea­ción

¿Cómo se alinean los elementos in­di­vi­dua­les dentro de CSS grid? Por defecto, los elementos se estiran para que encajen de forma precisa en la cua­drí­cu­la. Por esto, el tamaño del elemento no tiene un papel de­te­r­mi­na­n­te y hasta ahora no se ha es­pe­ci­fi­ca­do en los ejemplos. En lugar de esto, hemos es­pe­ci­fi­ca­do sobre qué celdas debe estar el objeto. Sin embargo, también se puede asignar un tamaño fijo a un elemento e in­te­grar­lo igua­l­me­n­te en la cua­drí­cu­la.

Los di­se­ña­do­res web pueden es­ta­ble­cer la ali­nea­ción de todos los elementos en el co­n­te­ne­dor o alinear in­di­vi­dua­l­me­n­te los elementos se­le­c­cio­na­dos. Para la primera variante, usa justify-items y align-items. El primer comando controla la ali­nea­ción ho­ri­zo­n­tal, el segundo, la vertical. Si solo quieres alinear un elemento, utiliza las opciones justify-self y align-self. Todos los comandos contienen las mismas opciones.

  • Stretch: el tamaño del objeto se ajusta al tamaño de las celdas se­le­c­cio­na­das.
  • Start: el objeto se alinea a la izquierda o arriba.
  • End: el objeto se alinea a la derecha o abajo.
  • Center: el objeto se alinea en el centro.
.grid-container {
    display: grid;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-columns: 100px 100px 100px 100px;
    grid-gap: 5px;
    justify-items: center;
    align-items: center;
}
.grid-item1 {
    background: grey;
    text-align: center;
    border: black 5px solid;
    width: 50px;
    height: 50px;
}
.grid-item2 {
    background: blue;
    text-align: center;
    border: black 5px solid;
    width: 50px;
    height: 50px;
    justify-self: start;
    align-self: start;
}
Imagen: Varias alineaciones con CSS grid
CSS grid permite cambiar la ali­nea­ción de forma global o in­di­vi­dual.

También puedes abreviar las in­s­tru­c­cio­nes usando place-items o place-self. Ambas in­fo­r­ma­cio­nes, vertical y ho­ri­zo­n­tal, se pueden indicar en una sola línea: place-items: <align-items> / justify-items>.

place-items: center / end;

Es posible entonces organizar los elementos en la rejilla. Sin embargo, también puedes mover toda la rejilla dentro del co­n­te­ne­dor. Si trabajas con una plantilla de CSS grid con es­pe­ci­fi­ca­cio­nes de tamaño estáticas, la cua­drí­cu­la puede no tener el mismo tamaño que todo el co­n­te­ne­dor. En este caso puedes usar justify-content y align-content para alinear la cua­drí­cu­la dentro del co­n­te­ne­dor, y así también dentro de la pantalla. Para esto hay también varias po­si­bi­li­da­des de ali­nea­ción:

  • Start: alineado a la izquierda o alineado hacia arriba
  • End: alineado a la derecha o alineado hacia abajo
  • Center: alineado al centro
  • Stretch: es­ti­ra­mie­n­to por cua­drí­cu­la
  • Space-around: di­s­tri­bu­ción uniforme del espacio alrededor de las celdas
  • Space-between: di­s­tri­bu­ción uniforme del espacio entre las celdas
  • Space-evenly: di­s­tri­bu­ción uniforme del espacio alrededor de las celdas, in­clu­ye­n­do el borde
.grid-container {
    display: grid;
    width: 800px;
    height: 800px;
    background: yellow;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-columns: 100px 100px 100px 100px;
    grid-gap: 5px;
    justify-content: space-evenly;
    align-content: center;
}
Imagen: Alineación de la cuadrícula del contenedor con CSS grid
Puedes alinear no solo elementos in­di­vi­dua­les, sino incluso la cua­drí­cu­la completa dentro del co­n­te­ne­dor.

Para esto también hay una abre­via­tu­ra: place-content: <align-content> / <justify-content>.

place-content: center / space-evenly;

Ajustes au­to­má­ti­cos para usar diseño re­s­po­n­si­vo

Una de las pri­n­ci­pa­les ventajas de CSS grid es la fle­xi­bi­li­dad de la rejilla. CSS grid se puede co­n­fi­gu­rar para que se ajuste au­to­má­ti­ca­me­n­te. Esto no solo facilita la vi­sua­li­za­ción en los di­fe­re­n­tes di­s­po­si­ti­vos: la au­to­ma­ti­za­ción también te fa­ci­li­ta­rá el trabajo con CSS.

Una función útil es repeat(). En vez de definir cada fila o columna in­di­vi­dua­l­me­n­te, se puede también es­pe­ci­fi­car un tamaño y la fre­cue­n­cia con la que se debe repetir este esquema. Esto es aún más fácil en co­m­bi­na­ción con las opciones auto-fill y auto-fit. De esta forma, se delega a CSS grid la creación de filas y columnas. Con la primera opción, inserta tantas celdas como le sea posible sin exceder los límites del co­n­te­ne­dor. Sin embargo, esto puede hacer que quede espacio sin usar. La opción auto-fit, por el contrario, ajusta el tamaño de las celdas para que usen todo el espacio di­s­po­ni­ble.

.grid-container {
    display: grid;
    width: 800px;
    height: 800px;
    grid-template-rows: repeat(auto-fit, 100px);
    grid-template-columns: repeat(auto-fit, 100px);
    grid-gap: 5px;
}

Las dos funciones grid-auto-columns y grid-auto-rows también son de gran utilidad. Estas dos in­s­tru­c­cio­nes te dan mayor libertad a la hora de crear elementos. Si, por ejemplo, tienes una cua­drí­cu­la con las di­me­n­sio­nes de 4x4 celdas y ahora se creara un elemento que debe comenzar a partir de la quinta columna, sería un problema. Con la función de creación au­to­má­ti­ca de filas y columnas, se evita este percance.

.grid-container {
    display: grid;
    grid-auto-rows: 100px;
    grid-auto-columns: 100px;
    grid-gap: 5px;
}

Incluso si se debe adaptar el tamaño de la cua­drí­cu­la y los elementos a la pantalla, a los di­se­ña­do­res web les gusta in­tro­du­cir valores mínimos y máximos. La de­cla­ra­ción minmax() sirve para ase­gu­rar­se de que ningún elemento se vuelva demasiado pequeño o demasiado grande. Indica primero el valor más pequeño entre pa­ré­n­te­sis, después el más grande.

.grid-container {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-auto-columns: minmax(50px, 150px);
    grid-gap: 5px;
}

Co­m­bi­na­n­do varias de las funciones pre­se­n­ta­das, puedes crear fá­ci­l­me­n­te un diseño re­s­po­n­si­vo.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 5px;
    justify-items: center;
    align-items: center;
}
.grid-item1 {
    background: grey;
    text-align: center;
    border: black 5px solid;
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>
<div class="grid-container">
    <div class="grid-item1">1</div>
    <div class="grid-item1">2</div>
    <div class="grid-item1">3</div>
    <div class="grid-item1">4</div>
    <div class="grid-item1">5</div>
    <div class="grid-item1">6</div>
    <div class="grid-item1">7</div>
    <div class="grid-item1">8</div>
    <div class="grid-item1">9</div>
    <div class="grid-item1">10</div>
</div>
</body>
</html>
Imagen: CSS grid con tamaño de pantalla medio
Si co­n­fi­gu­ras CSS grid co­rre­c­ta­me­n­te, puedes crear un diseño re­s­po­n­si­vo sin muchas he­rra­mie­n­tas.
Imagen: CSS grid en tamaño de pantalla ancha
Si se aumenta el área de vi­sua­li­za­ción, caben más elementos en una fila.
Imagen: CSS grid con pantalla pequeña
CSS grid layout permite vi­sua­li­zar el contenido co­rre­c­ta­me­n­te incluso en las pantallas más pequeñas.
En resumen

CSS grid layout permite a los di­se­ña­do­res crear diseños exigentes con poco esfuerzo. Con la cua­drí­cu­la, siempre podrás controlar dónde apa­re­ce­rán los elementos, incluso en un diseño re­s­po­n­si­vo.

Ir al menú principal