Grid

CSS Grid Layout (también conocido como "Grid"), es un sistema de diseño bidimensional basado en grillas que tiene como objetivo hacer nada menos que cambiar por completo la forma en que diseñamos las interfaces de usuario basadas en grillas. Siempre se ha usado CSS para diseñar nuestras páginas web, pero nunca se ha hecho un buen trabajo. Primero usamos tablas, luego flotantes, posicionamiento y bloque en líacute;nea, pero todos estos métodos eran esencialmente hacks y dejaban fuera muchas funcionalidades importantes (centrado vertical, por ejemplo). Flexbox ayudó, pero está diseñado para diseños unidimensionales más simples, no complejos de dos dimensiones (Flexbox y Grid realmente funcionan muy bien juntos). Grid es el primer módulo CSS creado especíacute;ficamente para resolver los problemas de diseño que todos hemos estado pirateando durante todo el tiempo que llevamos creando sitios web.

Propiedades del elemento padre

Están son algunas de las propiedades del padre:

Display: Define el elemento del contenedor de cuadríacute;cula y estbalece un nuevo contexto de formato de cuadríacute;cula para sus contenidos. Valores:
- grid - genera una grilla de nivel de bloque
- grid en linea: genera una grilla de nivel en linea
- subcuadricula: si el contenedor de la cuadríacute;cula es en síacute; mismo un elemento de la cuadríacute;cula (es decir, cuadríacute;culas anidadas), puede usar esta propiedad para indicar que desea que los tamaños de sus filas / columnas se tomen de su elemento primario en lugar de especificar el suyo propio.
Grid-template-columns/rows: Define las columnas y filas de la cuadríacute;cula con una lista de valores separados por espacios. Los valores representan el tamaño de la ruta y el espacio entre ellos representa la líacute;nea de la cuadríacute;cula. Valores: <track-size>, <line-name>
Grid-templates-areas: Define una plantilla de cuadríacute;cula al hacer referencia a los nombres de las áreas de cuadríacute;cula que se especifican con la grid-areapropiedad. Repetir el nombre de un área de cuadríacute;cula hace que el contenido abarque esas celdas. Un períacute;odo significa una celda vacíacute;a. La sintaxis en síacute; proporciona una visualización de la estructura de la grilla. Valores: <Grid-templates-areas>
grid-column/row-gap: Especifica el tamaño de las líacute;neas de la grilla. Puedes pensar que es como establecer el ancho de las canaletas entre las columnas / filas. Valores: <line-size>

Ejemplos

Grid gap:

.grid {
display: grid;
width: 500px;
grid-gap: 50px 100px;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
}
.grid-item {
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

Grid gap

Propiedades del elemento hijo

Están son algunas de las propiedades del hijo:

Grid-columns/row-start/end: Determina la ubicación de un elemento de cuadríacute;cula dentro de la cuadríacute;cula al referirse a líacute;neas de cuadríacute;cula especíacute;ficas. grid-column-start/ grid-row-startes la l&íacute;nea donde comienza el art&íacute;culo, y grid-column-end/ grid-row-end es la líacute;nea donde termina el artíacute;culo. Valores: <linea>, span <numero>, span <nombre>, automatico.
Grid-area: Le da un nombre a un elemento para que pueda ser referenciado por una plantilla creada con la grid-template-areas propiedad. Alternativamente, esta propiedad se puede usar como una taquigrafíacute;a aún más corta para grid-row-start + grid-column-start + grid-row-end + grid-column-end. Valores: <nombre>, <row-start> / <column-start>, <row-end>, <column-end>
Justify-self: Alinea el contenido dentro de un elemento de la cuadríacute;cula a lo largo del eje de la fila (a diferencia de lo align-self que se alinea a lo largo del eje de la columna ). Este valor se aplica al contenido dentro de un único elemento de la grilla. Vlores: inicio, final, centro, estirar. Para establecer la alineación para todos los elementos en una grilla, este comportamiento también se puede establecer en el contenedor de cuadríacute;cula a través de la justify-itemspropiedad.
Align-self:Alinea el contenido dentro de un elemento de la cuadrícula a lo largo del eje de la columna (a diferencia de lo justify-selfque se alinea a lo largo del eje de la fila ). Este valor se aplica al contenido dentro de un único elemento de la grilla. Valores: inicio, final, centro, destiramiento

Ejemplos

Justify-self:

.grid2 {
display: grid;
width: 500px;
background-color: red;
padding: 10px;
}
.grid-item2 {
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
justify-self: center;
text-align: center;
}

Proyecto css: GRID

Componenetes

Propiedades del elemento padre

Ejemplos

Grid gap

Propiedades del elemento hijo

Ejemplos

Justify-self