Conocimiento inducción-cuadrícula diseño-cuadrícula

display:grid/inline-grid;

[Convertir elementos en elementos de bloque/elementos en línea]

Dividir filas: grid-template-rows: val val ...;

Dividir columnas: grid-template-columns: val val...

[El número de valores val indica el número de filas]

Establecer espacio entre filas: grid-row-gap: val;

Establecer espacio entre columnas: grid-column-gap: val

Escritura compuesta: grid-gap: val; (fila) val(col);

Especifique la dirección en la que se organizan los elementos secundarios: grid-auto-flow:column | p>

[El valor predeterminado es fila]

Alineación horizontal:

justificar-contenido: inicio | fin | estirar | espacio-entre | espacio-uniforme; /p>

align-content: inicio | fin | centro | espacio-alrededor | espacio-uniforme

escritura compuesta: lugar-contenido: alineación vertical alineación horizontal

[ space-evenly: El espacio entre cuadrículas y cuadrículas y entre cuadrículas y bordes es igual, alineado con el espacio alrededor ]

Alineación horizontal: justify-items:start strech |

Alineación vertical: align-items: inicio | fin | centro

[Si el elemento no tiene un ancho y alto establecidos, se utilizará justify-items:stretch; por defecto]

p>

Método de escritura compuesto: colocar elementos: alineación vertical alineación horizontal

[Suponga una cuadrícula de 3x3]

Cuadrícula vertical; líneas: grid-template- columns: [c1] 100px [c2] 100px [c3] auto [c4]

Líneas de grid horizontales: grid-template-rows: [r1] 100px [r2] 100px [ r3] auto [r4 ];

[El nombre predeterminado es 1,2,3,4(-4,-3,-2,-1) y no se sobrescribirá]

Fusionar columnas:

grid-column-start: el nombre de las líneas de cuadrícula verticales en el punto inicial de la fusión

grid-column-end: el nombre de la combinación; líneas de cuadrícula verticales en el punto final de la fusión;

Filas de fusión:

grid-row-start: el nombre de las líneas de cuadrícula verticales en el punto inicial de la fusión

grid-row-end: el nombre de las líneas verticales de la cuadrícula en el punto final de la fusión

Método de escritura compuesto:

Fusionar columnas: grid-column:start/ end

Fusionar filas: grid-row:start/end

[Supuesto para una cuadrícula de 3x3]

p> Especifique el área de la cuadrícula:

[Se aceptan comillas simples o dobles]

[El nombre del área se puede mostrar en una sola línea o en una línea doblada]

[Las áreas inútiles se pueden representar mediante .]

Elementos de asignación: grid-area: nombre del área

[Si las áreas especificadas son plurales y adyacentes son rectángulos o cuadrados; , se fusionarán automáticamente]

[Especifique el nombre de la región sin comillas]