Elemento de rejilla CSS

1
2
3
4
5

Prueba personalmente

Elementos secundarios (proyectos)

El contenedor de cuadrícula contiene elementos de cuadrícula.

Por defecto, el contenedor tiene un elemento de cuadrícula en cada columna de cada fila, pero puede configurar el estilo de los elementos de cuadrícula para que se extiendan a través de varias columnas y / o filas.

Propiedad grid-column:

grid-column La propiedad define en qué columna se colocará el proyecto.

Puede definir la posición de inicio y final del proyecto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Las columnas de cada fila se definen dentro de las comillas invertidas y se separan por espacios.grid-column Las propiedades son abreviaturas de las propiedades grid-column-start y grid-column-end.

Si desea ubicar un proyecto, puede referirse a los números de línea (números de línea) o usar la palabra clave "span" para definir cuántas columnas cubrirá el proyecto.

Ejemplo

Hace que "item1" comience en la columna 1 y termine antes de la columna 5:

Hacer que "myArea" abarque dos columnas en el diseño de rejilla de cinco columnas (los puntos representan elementos sin nombre):
  grid-column: 1 / 5;
}

Prueba personalmente

Ejemplo

Hace que "item1" comience en la columna 1 y se extienda 3 columnas:

Hacer que "myArea" abarque dos columnas en el diseño de rejilla de cinco columnas (los puntos representan elementos sin nombre):
  grid-column: 1 / span 3;
}

Prueba personalmente

Ejemplo

Hace que "item2" comience en la columna 2 y se extienda 3 columnas:

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

Prueba personalmente

Propiedad grid-row:

grid-row La propiedad define en qué fila se colocará el proyecto.

Puede definir la posición de inicio y final del proyecto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Las columnas de cada fila se definen dentro de las comillas invertidas y se separan por espacios.grid-row La propiedad es una abreviatura de las propiedades grid-row-start y grid-row-end.

Para colocar elementos, puede referirse a los números de fila o usar el nombre clave "span" para definir cuántas filas cruzará este proyecto:

Ejemplo

Hace que "item1" comience en la línea de fila 1 y termine en la línea de fila 4:

Hacer que "myArea" abarque dos columnas en el diseño de rejilla de cinco columnas (los puntos representan elementos sin nombre):
  grid-row: 1 / 4;
}

Prueba personalmente

Ejemplo

Hace que "item1" comience en la primera fila y se extienda 2 filas:

Hacer que "myArea" abarque dos columnas en el diseño de rejilla de cinco columnas (los puntos representan elementos sin nombre):
  grid-row: 1 / span 2;
}

Prueba personalmente

Propiedad grid-area

grid-area La propiedad puede utilizarse como una abreviatura de las propiedades grid-row-start, grid-column-start, grid-row-end y grid-column-end.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Ejemplo

Hace que "item8" comience en la línea de fila 1 y la línea de columna 2, y termine en la línea de fila 5 y la línea de columna 6:

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

Prueba personalmente

Ejemplo

Hace que "item8" comience en la línea de fila 2 y la línea de columna y se extienda 2 filas y 3 columnas:

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

Prueba personalmente

Elemento de rejilla nombrado

grid-area La propiedad también se puede usar para asignar nombres a los elementos de la rejilla.

Encabezado
Menú
Principal
Derecha
Pie de página

Se puede utilizar el contenedor de la rejilla para grid-template-areas la propiedad para referir al elemento de la rejilla nombrado.

Ejemplo

El nombre del "item1" es "miArea" y se extiende a todos los cinco columnas del diseño de la rejilla:

Hacer que "myArea" abarque dos columnas en el diseño de rejilla de cinco columnas (los puntos representan elementos sin nombre):
  .item1 {
}
.grid-container {
  grid-template-areas: 'miArea miArea miArea miArea miArea';
}

Prueba personalmente

Cada fila se define con comillas invertidas (' ')

Cada fila se define con comillas invertidas (' ')

Las columnas de cada fila se definen dentro de las comillas invertidas y se separan por espacios.Comentarios:

Ejemplo

Los puntos representan elementos de rejilla sin nombre.

Hacer que "myArea" abarque dos columnas en el diseño de rejilla de cinco columnas (los puntos representan elementos sin nombre):
  .item1 {
}
.grid-container {
  grid-area: myArea;
}

Prueba personalmente

grid-template-areas: 'myArea myArea . . .';

Ejemplo

Para definir dos filas, define la segunda fila en otro grupo de comillas invertidas:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

Prueba personalmente

Ejemplo

Nombra todos los elementos y crea un patrón de página web siempre listo:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Prueba personalmente

El orden de los elementos

El diseño de rejilla nos permite colocar los elementos en cualquier posición que nos guste.

El primer elemento del código HTML no tiene que mostrarse como el primer elemento de la rejilla.

1
2
3
4
5
6

Ejemplo

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

Prueba personalmente

Puede reordenar el orden de ciertos tamaños de pantalla utilizando consultas de medios:

Ejemplo

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

Prueba personalmente