↵
Anteriormente dijimos que elástica diseño punto de conocimiento, todos sabemos que los beneficios del diseño elástico es unidimensional . Podemos pensar, ya que existe una dimensión de la cuestión, entonces también debe tener un diseño multidimensional de la misma! Hoy en día, que acaba de decir el ejército cañamazo, su ventaja es multidimensional.
mostrará: rejilla; uso básico
El papel de la gramática en el contenedor primario por encima
- mostrar: red; nuestra afirmación de que el contenedor utilizará un diseño de cuadrícula
- rejilla-template-columnas: el número de columnas
- rejilla-template-filas: Número de filas dispuestas
- rejilla-template-áreas: región dividida, la región deben ser rectangulares, no rejilla rectangular de bloque no válido
- redacción compuesto: rejilla plantilla: columnas compuesta de escritura, el número de filas OH, área dividida
- NOTA: unidades de rejilla FR (relación de unidades);
Considere el código y representaciones siguiente:
Ahora vemos las tres cifras seguido por el código CSS, código html y representaciones.
Desde la primera imagen podemos ver parte de un comentario, nos habló de arriba, la rejilla-plantilla es el número de columnas, filas, OH, área compuesta de escritura dividida; es decir, se van registrando es muy posible que una parte Alternativamente rejilla-template-columnas, el valor del atributo de la rejilla-template-filas y rejilla-plantilla-áreas, el efecto es el mismo. Podemos tratar de forma privada, hay una buena viejo dicho: la práctica hace al maestro. jaja
Sin duda lo encontramos! Nuestro cada uno de la red son del mismo tamaño, por lo que algunas personas pueden dudar de ella! Que no es lo mismo que los héroes de él! Por ejemplo, algunos sitios Web, aquí tenemos cita sobre Bernd Kammerer sitio web, los socios interesados pueden echar un vistazo, la imagen es la siguiente:
Aquí tenemos una imagen clara del tamaño de las muestras, tamaños medios de la muestra que la imagen de nuestros tamaños de cuadrícula no son los mismos. Entonces, ¿cómo lograr este efecto es ?
A continuación, para todo el mundo secreto, vistazo al código:
<style>
#main{
width: 300px;
height: 300px;
margin: 40px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a2 a3"
"a1 a5 a6"
"a7 a8 a8";
align-items: center;
text-align: center;
#main div{height: 100%;}
#main .b1{grid-area: a1;background-color: blue;}
#main .b2{grid-area: a2;background-color: red;}
#main .b3{grid-area: a3;background-color: yellow;}
#main .b4{grid-area: a5;background-color: teal;}
#main .b5{grid-area: a6;background-color: tomato;}
#main .b6{grid-area: a7;background-color: hotpink;}
#main .b7{grid-area: a8;background-color: lightskyblue;}
}
</style>
¿Qué podemos encontrar, de acuerdo con lo anterior dos fotos de ella?
efecto figura no se encuentra dentro del tamaño de la cuadrícula y los otros dos no son los mismos. ¿Por qué no lo hará lo mismo? Nos fijamos en el valor del código de los cuales rejilla-template-áreas, se encontró que hay dos de una serie que a1, dos A8, a continuación, ver la figura código dentro de la sección de primera clase, nos encontraremos con un nuevo atributo : Red de área, es útil para dirigirse a una región específica del contenedor a una específica (en este caso esperanza término equivocado, perdóname!). Por ejemplo, el a1 región en la clase asignada a b1, y así sucesivamente. Te quiero con el cerebro inteligente puede entenderlo.
Bien! Entonces se dice que un siguiente y la línea de separación
7.grid-columna-gap: el paso de la columna
Espaciado de línea: 8.grid-fila-gap
9.grid-gap: redacción compleja. rejilla-fila-gap rejilla-columna-gap
/* 给我们的main添加列间距 */
grid-column-gap: 6px;El siguiente es el caso, véase la Figura:
Podemos ver claramente que el espacio entre columnas se genera en la columna, Nota: sólo en el terreno de juego entre las dos redes.
/* 给我们的main添加行间距 */
grid-row-gap: 6px;
Del mismo modo, podemos ver claramente el espacio generado entre líneas, Nota: sólo en el terreno de juego entre las dos redes.
Después de que vemos aquí, si podemos entender y comprender, a continuación, Xiao Bian aquí para felicitar a usted, usted tiene que dominar el trazado inicial de rejilla para utilizarlo!
A continuación nos fijamos en algunos de los códigos que están más familiarizados con,
-justificar artículos: nivel medio de realización subclave
defecto: valor por defecto estiramiento, tracción. rendimiento de llenado horizontal o vertical.
Inicio
Centro de
Fin
align-artículos: vertical centro subclave realización
defecto: valor predeterminado estiramiento, tracción. rendimiento de llenado horizontal o vertical.
Inicio
Centro
End
Place-artículos: Compuesto de escritura
align-items-justifican artículos
justificar-contenido: alineación horizontal de la rejilla global
por defecto: Estiramiento
Inicio
Fin
Centro
Espacial-ENTRE
Espacio-en torno a
Espacio-UNIFORME
align-contenido: la alineación vertical de toda la red
por defecto: Estiramiento
Inicio
Fin
Centro
Espacial-ENTRE
Espacio-en torno a
Espacio-UNIFORME
lugar-contenido: texto complejo
align contenido justifica en el contenido
para ver en el que no se siente particularmente familiarizados con ella? Sí, exactamente por encima de estos atributos básicos y nuestro diseño interior flexible. Una vez más no voy a hacer más para explicarlo! Si no entienden, puede hacer clic aquí para diseños elásticos , para averiguar.
El papel de la gramática en el anterior sub-contenedores
Hablemos sobre el papel de algunos valores de las propiedades de uso común en niños mayores
- rejilla-zona: buscar áreas designadas
1. nombre correspondiente a la red
2. La línea de dígitos de escritura correspondiente: Rejilla-Area :. tercera / span 2/4;..
Rejilla-Start-fila / columna-Grid-Start / End-Grid-fila / columna-Grid -fin
ocupado por la posición de la rejilla-columna de inicio en la dirección horizontal a partir
posición final ocupado por la horizontal-columna de fin de rejilla
posición de partida en la dirección vertical ocupado por la rejilla-fila-start
ocupado verticalmente posición de final de fila de extremo cuadrícula
