Articles
Introducción a CSS
Propiedades de CSS relacionadas con el diseño de cuadrícula

Propiedades de CSS relacionadas con el diseño de cuadrícula

Este artículo explica las propiedades de CSS relacionadas con el diseño de cuadrícula.

Puedes aprender cómo describir la cuadrícula y la cuadrícula en línea.

YouTube Video

HTML para vista previa

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

Diseño de cuadrícula

grid 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

Una cuadrícula es un sistema de diseño para alinear elementos en filas y columnas bidimensionales. Usando una cuadrícula, puedes construir fácilmente y de manera flexible diseños complejos que eran difíciles con los métodos tradicionales de float o position. Mientras que flexbox sobresale en diseños unidimensionales, la cuadrícula es adecuada para diseños bidimensionales.

  • La clase grid-box aplica un diseño de cuadrícula especificando grid en la propiedad display. Este elemento se llama un contenedor de cuadrícula.
  • La propiedad grid-template-columns especifica el ancho de las columnas de la cuadrícula. En este ejemplo, la primera columna tiene 100px, la segunda columna tiene 200px, y la tercera columna ocupa el espacio restante (auto).
  • La propiedad grid-template-rows especifica la altura de las filas de la cuadrícula. La primera fila tiene 100px, la segunda fila es automática (auto), y la tercera fila tiene una altura de 50px.
  • La propiedad gap establece el espacio entre los elementos de la cuadrícula. Agregando 10px de espacio entre columnas y filas.

Terminología Básica

  1. Un contenedor de cuadrícula es un elemento con la propiedad display configurada como grid, y sus hijos se convierten en elementos de la cuadrícula.
  2. Los elementos de la cuadrícula son los elementos hijos colocados directamente dentro de un contenedor de cuadrícula.

Propiedades principales de la cuadrícula

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • Las propiedades grid-template-columns y grid-template-rows definen el tamaño de cada columna y fila.
  • Se pueden usar unidades como px y %, así como fr (fracción) para especificar una proporción del espacio restante.
    • En este ejemplo, hay tres columnas, y la segunda columna es el doble del ancho de las demás.
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column y grid-row especifican en qué columna o fila estará colocado el elemento de la cuadrícula.
    • En este ejemplo, el elemento abarca desde la segunda columna hasta la cuarta columna y desde la primera fila hasta la tercera fila.
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows y grid-auto-columns son propiedades que controlan el tamaño de las filas y columnas que se generan automáticamente cuando las líneas o columnas de la cuadrícula no están definidas explícitamente.
    • En este ejemplo, se definen explícitamente 2 filas y 2 columnas, pero si se agregan más elementos, se generarán automáticamente nuevas filas o columnas según grid-auto-rows y grid-auto-columns.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Alinea los elementos de la cuadrícula horizontalmente (justify-items) y verticalmente (align-items).
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area especifica de una vez en qué área del contenedor de la cuadrícula debe colocarse el elemento de la cuadrícula.
    • En este ejemplo, significa ocupar desde la 1ª fila hasta la 3ª fila y desde la 2ª columna hasta la 4ª columna.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap agrega espacio entre columnas y filas. También puedes especificar el espacio entre columnas y filas de forma individual usando column-gap y row-gap.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow es una propiedad que establece la dirección en la que se colocan los elementos, ya sea por filas o por columnas.

Ejemplo de disposiciones complejas 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

De esta manera, la cuadrícula te permite crear un diseño completo de página web con un código simple.

  • En este ejemplo, hay tres columnas (barra lateral, contenido principal y publicidad) y tres filas (encabezado, contenido y pie de página).
  • El encabezado y el pie de página ocupan todo el ancho de la página, con el contenido en el centro y la barra lateral y la publicidad a ambos lados.

Ventajas de las Cuadrículas

Las ventajas de grid incluyen los siguientes puntos:.

  • Diseño bidimensional sencillo: gestionar el diseño en filas y columnas permite lograr incluso diseños complejos con menos código.
  • Compatible con diseño responsivo: el sistema de grid facilita la creación de diseños adaptables a diferentes tamaños de pantalla.

Propiedad gap 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

La propiedad gap se usa en diseños de grid y flexbox para establecer el espacio (huecos) entre elementos. Con esta propiedad, puedes colocar fácilmente espacio entre elementos secundarios.

  • En la clase gap-grid-container, se establece un espacio de 30px verticalmente y 10px horizontalmente entre cada elemento. Dado que se crea una cuadrícula de 3 columnas con grid-template-columns, los espacios se aplican vertical y horizontalmente entre cada elemento. En la clase gap-flex-container, se aplica un espacio de 50px entre los tres elementos del flexbox.

Sintaxis Básica 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap especifica el espacio entre filas. Este es el espacio vertical en diseños de grid o flex.
  • column-gap especifica el espacio entre columnas. Este es el espacio horizontal.

Si no se especifican dos valores, un solo valor se aplica tanto a row-gap como a column-gap.

Ventajas de la propiedad gap

Los beneficios de la propiedad gap incluyen lo siguiente:.

  • Configuración simple de espacios: El código para establecer espacios entre elementos secundarios se simplifica, eliminando la necesidad de establecer márgenes o padding adicionales entre los elementos.
  • Adaptación flexible: Admite fácilmente el diseño responsivo, permitiendo ajustes de diseño flexibles.

Propiedad grid-template-areas 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

La propiedad grid-template-areas proporciona una forma de nombrar áreas dentro de un contenedor de cuadrícula y usar esos nombres para posicionar fácilmente los elementos de la cuadrícula. Usar esta propiedad permite definiciones de diseño visualmente intuitivas.

Los elementos posicionados en áreas nombradas especificadas por la propiedad grid-template-areas deben tener el mismo nombre asignado con la propiedad grid-area. Incluso si los elementos abarcan múltiples celdas, se posicionan automáticamente de manera correcta.

En este ejemplo, la cuadrícula se crea de la siguiente manera:.

  • En la primera fila, el "header" ocupa dos columnas.
  • "Sidebar" se coloca a la izquierda y "content" a la derecha en la segunda fila.
  • "Footer" ocupa dos columnas en la tercera fila.

Uso básico 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

En la propiedad grid-template-areas, el nombre del área se especifica para cada fila. Al colocar elementos en regiones con nombres asignados, puedes crear diseños fácilmente. - En este ejemplo, se crea una cuadrícula con 2 filas y 3 columnas, y cada celda se nombra como area1, area2, etc.

Definiendo celdas vacías usando . 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

Si deseas tener celdas vacías en tu diseño, puedes representar las celdas vacías usando un . (punto). - Como en este ejemplo, al especificar un . entre sidebar y content, la segunda columna queda vacía.

Ventajas de la propiedad grid-template-areas

Las ventajas de la propiedad grid-template-areas incluyen los siguientes puntos.

  • Diseño visual: Permite expresar visualmente el diseño, lo que facilita la comprensión del diseño.
  • Movimiento fácil de elementos: Puedes ajustar fácilmente el diseño de los elementos cambiando las definiciones de las áreas en CSS sin modificar el HTML.

Notas

Al usar la propiedad grid-template-areas, es importante prestar atención a los siguientes puntos.

  • El número de nombres en cada fila debe coincidir con el número de columnas definidas.
  • Asignar el mismo nombre a varias celdas unirá esas celdas, pero al asignar a filas o columnas diferentes, el área debe ser cuadrada.

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid es uno de los valores de la propiedad display en CSS. Aplicar esta propiedad hace que el elemento se comporte como un contenedor de nivel en línea, creando un contexto de formato de cuadrícula internamente. A diferencia de display: grid, se comporta como un elemento en línea en el flujo del documento.

Casos de uso de inline-grid

inline-grid no es tan común como grid, pero puede usarse de manera efectiva en escenarios específicos.

  • Cuadrícula dentro de un contexto en línea: Útil cuando deseas colocar una cuadrícula junto al contenido de texto u otros elementos en línea. Por ejemplo, es útil cuando se necesita una estructura de cuadrícula para botones, distintivos, etiquetas, etc., pero quieres mostrarlos en línea sin interrumpir el flujo del texto.

  • Control de diseño dentro de elementos en línea: Incluso cuando se necesitan diseños complejos dentro de elementos en línea como enlaces, botones o spans, inline-grid puede gestionar la estructura interna con un diseño de cuadrícula mientras evita el comportamiento de bloque.

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

En este caso, el botón muestra íconos y texto en una cuadrícula, mientras sigue siendo un elemento en línea en el flujo del documento.

  • Componentes en línea adaptables: inline-grid puede usarse para pequeños componentes que forman parte de un contenido en línea y que requieren un diseño de cuadrícula. Por ejemplo, es adecuado para formularios en línea, distintivos, etiquetas de productos, etc., donde deseas ajustar el diseño con una cuadrícula mientras mantienes el contenido en línea.

Alineación y dimensionamiento de inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Al igual que otros elementos en línea, inline-grid respeta la alineación vertical con respecto al contenido circundante. Puedes controlar la alineación de la cuadrícula utilizando la propiedad vertical-align.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • Con respecto al tamaño, un elemento inline-grid ocupa únicamente el ancho requerido por su contenido de cuadrícula. Si es necesario, puedes establecer explícitamente el ancho, la altura y las dimensiones mínimas/máximas.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

También es posible que el diseño de la propia cuadrícula determine el tamaño del contenedor inline-grid, y esta tendencia es más fuerte cuando se usan unidades flexibles como fr, auto y porcentajes.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades CSS relacionadas con FlexboxPropiedades de CSS relacionadas con el diseño de columnas