Elementos de Cuadrícula CSS

Por defecto, un contenedor tiene un elemento por cada columna y por cada fila, pero puede se puede establecer que los elementos abarquen multiples columnas y/o multiples filas.

La propiedad grid-column

La propiedad grid-column establece en cual columna colocar el elemento. Se puede establecer en donde iniciará el elemento y en donde terminará, es decir, cuantas columnas abarcara el elemento.

Nota: La propiedad grid-column es una propiedad abreviada para grid-column-start y para grid-column-end.

Para establecer un elemento extendido, se puede referir al número de línea o usar la palabra reservada span para definir cuantas columnas abarcará el elemento.

En el siguiente ejemplo, se establece que el primer elemento inicie en la línea de columna 1 y términe en la línea de columna 5.

CSS:

.elemento-1 {
  grid-column: 1 / 5;
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Muestra:

A continuación se establece que el primer elemento inicia en la primera columna y se extiende hasta la tercer columna:

CSS:

.elemento-1 {
  grid-column: 1 / span 3;
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Muestra:

A continuación se establece que el segundo elemento inicie en la segunda columna y abarque 3 columnas:

CSS:

.elemento-1 {
  grid-column: 2 / span 3;
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Muestra:

La propiedad grid-row

La propiedad grid-row establece en cual fila colocar el elemento. Se puede establecer en donde iniciará el elemento y en donde terminará, es decir, cuantas filas abarcará el elemento.

Nota: La propiedad grid-row es una propiedad abreviada para grid-row-start y para grid-row-end.

Para establecer un elemento extendido, se puede referir al número de línea o usar la palabra reservada span para definir cuantas filas abarcará el elemento.

En el siguiente ejemplo, se establece que el primer elemento inicie en la primera línea de fila y términe en la línea de fila 3.

CSS:

.elemento-1 {
  grid-row: 1 / 3;
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
</div>

Muestra:

A continuación se establece que el primer elemento inicia en la primera fila y se extiende hasta la tercer fila:

CSS:

.elemento-1 {
  grid-row: 1 / span 3;
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
</div>

Muestra:

La propiedad grid-area

La propiedad grid-area puede ser usada como una propiedad abreviada para las propiedades grid-row-start, grid-column-start, grid-row-end y grid-column-end.

En el siguiente ejemplo, establecemos que el elemento 8 inicie en la primera línea de fila y en la segunda línea de columna, y termina en la quinta línea de fila y en la sexta línea de columna.

CSS:

.elemento-8 {
  grid-area: 1 / 2 / 5 / 6;
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

Muestra:

En el siguiente ejemplo, se establece que el elemento 8 inicie en la segunda línea de fila y en la primera línea de columna, y termina abarcando dos filas y tres columnas.

CSS:

.elemento-8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>

Muestra:

Nombrar los Elementos de Cuadrícula

La propiedad grid-area puede también usarse para asignarle nombres a los elementos de cuadrícula. Los elementos de cuadríacula con nombre pueden ser referidos en la propiedad grid-template-areas de su contenedor.

Cada fila es definida por apóstrofos ' '. Las columnas en cada fila se definen dentro de los apostrofos, separadas por espacios. Los signos de punto representan a un nombre de elemento de cuadrícula.

En el siguiente ejemplo, se establece al primer elemento con el nombre "miarea" y abarca las 5 columnas de la cuadrícula:

CSS:

.elemento-1 {
  grid-area: miarea;
}
.contenedor-grid {
  grid-template-areas: 'miarea miarea miarea miarea miarea';
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Muestra:

En el siguiente ejemplo, "miarea" abarca dos columnas en una cuadrícula de cinco columnas. Los puntos representan los elementos de cuadrícula sin nombre.

CSS:

.elemento-1 {
  grid-area: miarea;
}
.contenedor-grid {
  grid-template-areas: 'miarea miarea . . .';
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Muestra:

Para hacer que el primer elemento abarque dos columnas y dos filas, se define un segundo conjunto de apóstrofos, con sus respectivas columnas de igual manera que en la primer conjunto:

CSS:

.elemento-1 {
  grid-area: miarea;
}
.contenedor-grid {
  grid-template-areas: 'miarea miarea . . .' 'miarea miarea . . .';
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

Muestra:

En el siguiente ejemplo se nombran todos los elementos, y hacer una plantilla de página web lista para usar.

CSS:

.elemento-1 { grid-area: header: }
.elemento-2 { grid-area: menu; }
.elemento-3 { grid-area: main; }
.elemento-4 { grid-area: right; }
.elemento-5 { grid-area: footer; }

.contenedor-grid {
  gril-template-area:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">Header</div>
  <div class="elemento-2">Menu</div>
  <div class="elemento-3">Main</div>
  <div class="elemento-4">Right</div>
  <div class="elemento-5">Footer</div>
</div> 

Muestra:

El orden de los elementos

El diseño de cuadrícula permite colocar los elementos de cuadrícula en el orden que deseemos. Es decir, el primer elemento en el código HTML no necesariamente tiene que aparecer como el primer elemento en la cuadrícula.

CSS:

.elemento-1 { grid-area: 1 / 3 / 2 / 4: }

.contenedor-grid {
  grid-template-columns: auto auto auto;
}

HTML:

<div class="contenedor-grid">
  <div class="elemento-1">1</div>
  <div>2</div>
  <div>3</div>
</div>

Muestra: