Tutorial CSS

CSS INICIO Introducción a CSS Sintaxis CSS Selectores de CSS CSS Cómo Comentarios CSS Colores CSS Fondos CSS Bordes CSS Márgenes CSS Relleno CSS Altura/ancho de CSS Modelo de caja CSS Esquema CSS Texto CSS Fuentes CSS Iconos CSS Enlaces CSS Listas CSS Tablas CSS Pantalla CSS Ancho máximo de CSS Posición de CSS Índice Z de CSS Desbordamiento de CSS CSS flotante Bloque en línea CSS Alinear CSS Combinadores de CSS Pseudo-clase CSS Pseudoelemento CSS Opacidad CSS Barra de navegación CSS Menús desplegables de CSS Galería de imágenes CSS Sprites de imagen CSS Selectores de atributos CSS Formularios CSS Contadores CSS Diseño del sitio web CSS Unidades CSS Especificidad CSS CSS !importante Funciones matemáticas CSS

CSS Avanzado

Esquinas redondeadas CSS Imágenes de borde CSS Fondos CSS Colores CSS Palabras clave de color CSS Gradientes CSS Sombras CSS Efectos de texto CSS Fuentes web CSS Transformaciones CSS 2D Transformaciones CSS 3D Transiciones CSS Animaciones CSS Información sobre herramientas de CSS Imágenes de estilo CSS Reflejo de imagen CSS Ajuste de objeto CSS Posición del objeto CSS Enmascaramiento CSS Botones CSS Paginación CSS Columnas múltiples de CSS Interfaz de usuario de CSS Variables CSS Tamaño del cuadro CSS Consultas de medios CSS Ejemplos de CSS MQ Caja flexible de CSS

Responsivo CSS

Introducción a la tracción trasera Vista de RWD Vista de cuadrícula RWD Consultas de medios RWD Imágenes de RWD Vídeos de RWD Marcos RWD Plantillas RWD

Cuadrícula CSS

Introducción a la cuadrícula Contenedor de rejilla Elemento de cuadrícula

CSS SASS

Tutorial de SASS

Ejemplos de CSS

Plantillas CSS Ejemplos de CSS prueba css Ejercicios CSS Certificado CSS

Referencias CSS

Referencia CSS Selectores de CSS Funciones CSS CSS Referencia Aural Fuentes web seguras CSS CSS Animable Unidades CSS Convertidor CSS PX-EM Colores CSS Valores de color CSS Valores predeterminados de CSS Compatibilidad con navegador CSS

Elemento de cuadrícula CSS


1

2

3

4

5


Elementos secundarios (artículos)

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

De forma predeterminada, un contenedor tiene un elemento de cuadrícula para cada columna, en cada fila, pero puede diseñar los elementos de cuadrícula para que abarquen varias columnas o filas.


La propiedad grid-column:

La grid-columnpropiedad define en qué columna(s) colocar un elemento.

Usted define dónde comenzará el elemento y dónde terminará.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Nota: La grid-columnpropiedad es una propiedad abreviada para el grid-column-starty las grid-column-endpropiedades.

Para colocar un elemento, puede hacer referencia a los números de línea o usar la palabra clave "span" para definir cuántas columnas abarcará el elemento.

Ejemplo

Haga que "elemento1" comience en la columna 1 y termine antes de la columna 5:

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

Ejemplo

Haga que "elemento1" comience en la columna 1 y abarque 3 columnas:

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

Ejemplo

Haga que "elemento2" comience en la columna 2 y abarque 3 columnas:

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


La propiedad de fila de cuadrícula:

La grid-rowpropiedad define en qué fila colocar un elemento.

Usted define dónde comenzará el elemento y dónde terminará.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

dieciséis

Nota: La grid-rowpropiedad es una propiedad abreviada para el grid-row-starty las grid-row-endpropiedades.

Para colocar un elemento, puede hacer referencia a los números de línea o usar la palabra clave "span" para definir cuántas filas abarcará el elemento:

Ejemplo

Haga que "elemento1" comience en la línea de fila 1 y termine en la línea de fila 4:

.item1 {
  grid-row: 1 / 4;
}

Ejemplo

Haga que el "elemento 1" comience en la fila 1 y abarque 2 filas:

.item1 {
  grid-row: 1 / span 2;
}


La propiedad del área de cuadrícula

La grid-areapropiedad se puede utilizar como una propiedad abreviada para grid-row-start, grid-column-starty grid-row-endlas grid-column-endpropiedades.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Ejemplo

Haga que "elemento 8" 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;
}

Ejemplo

Haga que "elemento 8" comience en la línea de fila 2 y en la línea de columna 1, y abarque 2 filas y 3 columnas:

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

Elementos de la cuadrícula de nombres

La grid-areapropiedad también se puede utilizar para asignar nombres a los elementos de la cuadrícula.

Encabezamiento

Menú

Principal

Correcto

Pie de página

Se puede hacer referencia a los elementos de cuadrícula con nombre mediante la grid-template-areaspropiedad del contenedor de cuadrícula.

Ejemplo

Item1 recibe el nombre "myArea" y abarca las cinco columnas en un diseño de cuadrícula de cinco columnas:

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

Cada fila está definida por apóstrofes (' ')

Las columnas de cada fila se definen dentro de los apóstrofes, separadas por un espacio.

Nota: un signo de punto representa un elemento de cuadrícula sin nombre.

Ejemplo

Deje que "myArea" abarque dos columnas en un diseño de cuadrícula de cinco columnas (los signos de punto representan elementos sin nombre):

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

Para definir dos filas, defina la columna de la segunda fila dentro de otro conjunto de apóstrofes:

Ejemplo

Haz que "item1" abarque dos columnas y dos filas:

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

Ejemplo

Asigne un nombre a todos los elementos y cree una plantilla de página web lista para usar:

.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';
}


El orden de los artículos

El diseño de cuadrícula nos permite colocar los elementos en cualquier lugar que deseemos.

El primer elemento del código HTML no tiene que aparecer como el primer elemento de la cuadrícula.

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; }

Puede reorganizar el orden para ciertos tamaños de pantalla mediante 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; }
}