Existen algunos métodos de diseño de gran alcance en CSS. La mayoría de ellos son fáciles de operar. Con una pequeña cantidad de código CSS, se pueden realizar diseños de página más complejos.
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>.wrapper {
margin: 0 auto;
width: 80%;
display: grid;
grid-template-columns: 100px 100px 100px;
}
.item {
height: 100px;
background-color: rgba(0,0,255,0.4);
border: 1px solid #000000;
box-sizing: border-box;
line-height: 100px;
font-size: 30px;
text-align: center;
color: white;
}
1. Contenedor de rejilla:
Entre ellos, el contenedor de cuadrícula es una etiqueta div cuyo valor de clase es envoltorio. Esta etiqueta necesita mostrar: cuadrícula; para habilitar el diseño de cuadrícula.
frEl dispositivo solo es adecuado para espacio libre en el contenedor
1. Atributo de columnas de plantilla de cuadrícula: establezca los atributos de columna del contenedor de cuadrícula
El valor establecido puede ser un porcentaje o un valor específico. Para varios valores, se establecerán varias columnas. Si la suma de los valores establecidos excede el ancho del contenedor principal, aparecerá una barra de desplazamiento
Figura 1.1 arriba: los valores específicos establecidos en la figura arriba.
La configuración del porcentaje se referirá al ancho del contenedor de la cuadrícula en sí. Si no hay ancho, vuelva a subir hasta que encuentre el elemento ancestro del ancho establecido, o el ancho de la etiqueta del cuerpo es el ancho del contenedor de la cuadrícula.
2. Atributo de filas de plantilla de cuadrícula: establezca los atributos de fila del contenedor de cuadrícula
El valor establecido puede ser un porcentaje o un valor específico, y se establecerán varias columnas para varios valores.
3.Atributo de áreas de plantilla de cuadrícula: bloque de cuadrícula
áreas de plantilla de cuadrícula: "ab c"
"ab c"
"ab c"; 三行 三 列
grid-template-areas: "a b"; una fila y dos columnas
Cada cadena dada generará una fila y cada celda separada por un espacio en una cadena generará una columna. Varias celdas con el mismo nombre que abarcan filas o columnas adyacentes se denominan áreas de cuadrícula. Los bloques de cuadrícula no rectangulares no son válidos.
/* 网格项中设置grid-area属性就可以占位特定的单元格 */
.wrapper {
grid-template-areas: "a b c"
"a b c"
"a b c";
}
.item:nth-child(odd) { grid-area: b; }
.item:nth-child(even) { grid-area: a; }
4.grid-column-gap: especifique el tamaño de la línea de la cuadrícula
Se puede considerar como el espacio o ancho entre celdas, y puede establecer un porcentaje o valor específico.
5.grid-row-gap: Igual que el anterior
6. Grid-gap: abreviatura de los dos atributos anteriores, el primer valor es el valor de grid-column-gap, el segundo valor es el valor de grid-row-gap
7.justify-items: alinee el contenido de los elementos de la cuadrícula a lo largo del eje de la columna
inicio : el contenido se alinea a la izquierda en el área de la cuadrícula
fin : el contenido se alinea a la derecha en el área de la cuadrícula
centro : el contenido se alinea en el centro del área de la cuadrícula
estirar : el ancho del contenido ocupa toda el área de la cuadrícula (valor predeterminado)
8.align-items: alinea el contenido de los elementos de la cuadrícula a lo largo del eje de la fila
inicio : el contenido se alinea en la parte superior del área de la cuadrícula
final : el contenido se alinea en la parte inferior del área de la cuadrícula
centro : el contenido se alinea en el centro del área de la cuadrícula
estirar : el ancho del contenido ocupa toda el área de la cuadrícula (valor predeterminado)
9.justify-content: alinee la cuadrícula a lo largo del eje de la columna
inicio: la cuadrícula está alineada a la izquierda en el contenedor de la cuadrícula
final: la cuadrícula está alineada en el extremo derecho del contenedor de la cuadrícula
centro: la cuadrícula está centrada en el contenedor de la cuadrícula
estirar -ajustar el tamaño de los elementos de la cuadrícula para que el ancho llene todo el
espacio del contenedor de la cuadrícula -establecer un número par de espacios entre los elementos de la cuadrícula, y el tamaño de la mayor brecha del borde sea la mitad del tamaño del espacio del medio brecha
space-between: establece un número par de espacios entre los elementos de la cuadrícula, sin espacios en los bordes extremos
space-evenly: establezca un número par de espacios entre los elementos de la cuadrícula, y el mayor espacio de borde es el mismo que
10.align-content: alinea la cuadrícula a lo largo del eje de la fila
inicio -la cuadrícula está alineada en la parte superior en el
extremo del contenedor de la cuadrícula -la cuadrícula está alineada en la parte inferior del
centro del contenedor de la cuadrícula -la cuadrícula está alineada en el centro en el contenedor de la cuadrícula
estirar -ajustar el tamaño del elemento de la cuadrícula de modo que su ancho llena toda la cuadrícula
Espacio de contenedor alrededor: establece un número par de espacios entre los elementos de la cuadrícula, el tamaño del espacio más entre bordes es la mitad del tamaño del espacio intermedio espacio entre
espacios: establece un número par de espacios entre elementos de la cuadrícula, y no hay espacio en el
espacio del borde extremo , de manera uniforme: establezca un número par de espacios entre los elementos de la cuadrícula, y el espacio más entre el borde es el mismo que
11.Grid-auto-columnas 和 cuadrícula-auto-filas
Especifique el tamaño de las pistas de cuadrícula generadas automáticamente (también conocidas como pistas de cuadrícula implícitas). Cuando se colocan explícitamente filas o columnas fuera del rango de cuadrícula definido (a través de grid-template-rows / grid-template-columnas), se crearán pistas de cuadrícula implícitas.
.wrapper {
grid-auto-columns: 100px;
grid-auto-rows: 100px;
}
.item:nth-child(1) {
grid-column: 1 / 4;
grid-row: 1 / 1;
background-color: #000000;
}
grid-column: 1/4 significa comenzar desde la primera línea de la columna hasta el final de la cuarta línea de la columna, ocupando tres columnas en total
rejilla-fila: 1/1 significa desde el principio de la primera línea hasta el final de la primera línea, un total de una línea
12.grid-auto-flow:
Si tiene elementos de cuadrícula que no se colocan explícitamente en la cuadrícula, el algoritmo de diseño automático comenzará a colocar automáticamente los elementos. Esta propiedad se utiliza para controlar el principio de funcionamiento del algoritmo de diseño automático.
fila : le dice al algoritmo de diseño automático que llene cada fila a su vez, y agregue nuevas filas según sea necesario
columna : le dice al algoritmo de diseño automático que llene cada columna a su vez, y agregue nuevas columnas según sea necesario
denso : le dice al algoritmo de diseño automático que intente rellene la cuadrícula antes Hay espacios dejados por elementos más pequeños
.wrapper {
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 120px 120px 120px;
grid-auto-flow: row;
}
.item:nth-child(2) {
grid-column: 1;
grid-row: 1 / 4;
background-color: #000000;
}
.item:nth-child(9) {
grid-column: 5;
grid-row: 1 / 4;
background-color: #000000;
}
13 cuadrícula:
Situado en una fila una declaración acerca de todos los atributos de la taquigrafía: grid-template-rows, grid-template-column, grid-template-areas, grid-auto-rows, grid-auto-columns, y grid-auto-flow. Este grid-column-gapy la grid-row-gap
propiedad se establecen en un valor inicial, por lo que incluso si no se establecen explícitamente como atributo.
Valores de atributo :
ninguno : todos los atributos secundarios se establecen en un valor inicial
subcuadrícula : a grid-template-rowsy el grid-template-columnsvalor del atributo en la subcuadrícula el sub-atributo restante se establece en un valor inicial
<Grid-Template-rows> / <Grid-Template-Columns> : a grid-template-rowsy grid-template-columns
se proporcionan valor especificado, la sub-atributo restante se establece en un valor inicial
<Rejilla-Auto-Flow> [<cuadrícula-auto-filas> [/ <cuadrícula-auto-Columnas>]] : grid-auto-flow, grid-auto-rowsy las grid-auto-columnspropiedades fueron tratados con el mismo valor, si se omite grid-auto-columnsPropiedad, se establecerá en grid-auto-rowsel valor de la propiedad. Si se ignoran ambos, ambos se establecerán en el valor inicial.
2. Elementos de la cuadrícula:
Entre ellos, el elemento de la cuadrícula (nodo secundario del contenedor de la cuadrícula) es una etiqueta div con un valor de clase de elemento.
1.grid-column-start: determina la posición del elemento de la cuadrícula en la cuadrícula utilizando una línea de cuadrícula específica
2.grid-column-end:
3.Inicio de fila de cuadrícula:
4.grid-row-end
número: línea de cuadrícula específica
lapso <número> : el elemento de la cuadrícula contiene el número especificado de pistas de rejilla
lapso <nombre> : el elemento de la cuadrícula contiene la pista red antes de la línea de rejilla del elemento de nombre de cuadrícula especificada
auto : indica el posicionamiento automático, el período de automático o lapso predeterminado es uno
grid-column-startEl grid-row-startatributo / indica la posición inicial de la línea de cuadrícula del elemento de cuadrícula y el atributo grid-column-end/ grid-row-endindica la posición final de la línea de cuadrícula del elemento de cuadrícula.
.item:nth-child(2) {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 4;
background-color: #000000;
}
grid-column-start: 3; indica que el elemento de la cuadrícula comienza desde la tercera línea de la columna. grid-column-end: 5; Indica que el elemento de la cuadrícula termina desde la línea de la quinta columna. Entonces el ancho es de 2 celdas
grid-row-start: 2; indica que el elemento de la cuadrícula comienza desde la segunda línea. grid-row-end: 4; Indica que el elemento de la cuadrícula termina desde la cuarta fila. Entonces la altura es de 2 celdas
5.grid-columna:
6.grid fila: forma corta de grid-column-start+ grid-column-endy grid-row-start+ grid-row-endatribuye respectivamente.
7.Área de cuadrícula:
Valor de atributo :
<nombre> -el nombre que definió
<row-start> / <column-start> / <row-end> / <column-end> -puede ser un número o una fila con nombre
8.justificarse
Alinee el contenido en el elemento de la cuadrícula a lo largo del eje de la columna (a diferencia de la alineación a lo largo del eje de la fila definido por la propiedad align-item). Este valor se aplica al contenido de un solo elemento de cuadrícula.
Valor del atributo :
inicio : el contenido está alineado con el
extremo izquierdo del área de la cuadrícula fin : el contenido está alineado con el extremo derecho del
centro del área de la cuadrícula: el contenido está en el medio del área de la cuadrícula
estiramiento : el ancho del contenido ocupa el espacio completo del área de la cuadrícula (valor predeterminado)
9.alinearse
Alinee el contenido en el elemento de la cuadrícula a lo largo del eje de la fila (a diferencia de la alineación a lo largo del eje de la fila definido por la propiedad justify-item). Este valor se aplica al contenido de un solo elemento de cuadrícula.
Valor del atributo :
inicio : el contenido está alineado con el
extremo izquierdo del área de la cuadrícula fin : el contenido está alineado con el extremo derecho del
centro del área de la cuadrícula: el contenido está en el medio del área de la cuadrícula
estiramiento : el ancho del contenido ocupa el espacio completo del área de la cuadrícula (valor predeterminado)