Mi informacion de contacto
Correo[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
El diseño de cuadrícula (Grid) es la solución de diseño CSS más poderosa.
Divide las páginas web en cuadrículas y se pueden combinar diferentes cuadrículas arbitrariamente para crear varios diseños. En el pasado, los efectos que sólo podían lograrse mediante marcos CSS complejos ahora están integrados en los navegadores.
Un diseño como el que se muestra arriba es la especialidad del diseño de cuadrícula.
El diseño de cuadrícula tiene ciertas similitudes con el diseño Flex, ambos pueden especificar la posición de varios elementos dentro del contenedor. Sin embargo, existen diferencias importantes.
El diseño flexible es un diseño de eje y solo puede especificar la posición del "elemento" frente al eje, que puede considerarse comoDiseño unidimensional . El diseño de cuadrícula divide el contenedor en "filas" y "columnas", genera celdas y luego especifica la celda donde se encuentra el "elemento", que puede considerarse comodiseño 2D . El diseño de cuadrícula es mucho más poderoso que el diseño Flex.
Antes de aprender el diseño de Grid, es necesario comprender algunos conceptos básicos.
Un área con un diseño de cuadrícula se llama "contenedor". Los elementos secundarios que utilizan el posicionamiento de cuadrícula dentro del contenedor se denominan "elementos".
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
En el código anterior, el más externo<div>El elemento es el contenedor, y los tres interiores.<div>Los elementos son artículos.
Aviso: El proyecto solo puede ser el elemento secundario de nivel superior del contenedor y no incluye los elementos secundarios del proyecto, como el código anterior.<p> Los elementos no son artículos. El diseño de cuadrícula solo tiene efecto en los proyectos.
El área horizontal dentro del contenedor se llama "fila" y el área vertical se llama "columna".
En la imagen de arriba, las áreas oscuras horizontales son "filas" y las áreas oscuras verticales son "columnas".
El área de intersección de filas y columnas se llama "celda".
Bajo circunstancias normales,nvale ymlas columnas produciránn x m células. Por ejemplo, 3 filas y 3 columnas producirán 9 celdas.
Las líneas que dividen la cuadrícula se llaman "líneas de cuadrícula". Las líneas de cuadrícula horizontales dividen filas y las líneas de cuadrícula verticales dividen columnas.
Bajo circunstancias normales,nDE ACUERDOn + 1línea de cuadrícula horizontal raíz,mListadom + 1Hay tres líneas de cuadrícula verticales, por ejemplo, hay cuatro líneas de cuadrícula horizontales en tres filas.
La imagen de arriba es una cuadrícula de 4 x 4 con un total de 5 líneas de cuadrícula horizontales y 5 líneas de cuadrícula verticales.
Las propiedades del diseño de cuadrícula se dividen en dos categorías. Un tipo se define en el contenedor y se denomina propiedades del contenedor; el otro tipo se define en el proyecto y se denomina propiedades del proyecto. Esta parte presenta primero las propiedades del contenedor.
display: gridEspecifica un contenedor para utilizar un diseño de cuadrícula.
div {
display: grid;
}
La imagen de arriba esdisplay: griddeEfecto。
De forma predeterminada, los elementos contenedores son elementos a nivel de bloque, pero también se pueden configurar como elementos en línea.
div {
display: inline-grid;
}
El código anterior especificadivEs un elemento en línea que utiliza un diseño de cuadrícula internamente.
La imagen de arriba esdisplay: inline-griddeEfecto。
Tenga en cuenta que después de configurar el diseño de cuadrícula, los subelementos del contenedor (elementos)
float、display: inline-block、display: table-cell、vertical-alignycolumn-*Todas las demás configuraciones no serán válidas.
Después de que el contenedor especifica el diseño de la cuadrícula, debe dividir las filas y columnas.grid-template-columnsLas propiedades definen el ancho de columna de cada columna,grid-template-rowsLa propiedad define la altura de la fila de cada fila.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
código anteriorEspecifica una cuadrícula con tres filas y tres columnas. El ancho de la columna y el alto de la fila son ambos.100px。
En lugar de utilizar unidades absolutas, también puedes utilizar porcentajes.
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
(1) repetir()
A veces es muy problemático escribir el mismo valor repetidamente, especialmente cuando hay muchas cuadrículas.En este momento, puedes usarrepeat() Función que simplifica valores repetidos.El código anterior utilizarepeat()Reescrito de la siguiente manera.
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
repeat()Acepta dos parámetros, el primer parámetro es el número de repeticiones (3 en el ejemplo anterior) y el segundo parámetro es el valor que se repetirá.
repeat()Está bien repetir un patrón.
grid-template-columns: repeat(2, 100px 20px 80px);
código anteriorSe definen 6 columnas, el ancho de la primera y cuarta columnas es100px, la segunda y quinta columnas20px, la tercera columna y la sexta columna80px。
(2) palabra clave de autocompletar
A veces, el tamaño de la celda es fijo, pero el tamaño del contenedor no está definido.Si desea que cada fila (o columna) acomode tantas celdas como sea posible, puede usarauto-fillLas palabras clave representan autocompletar.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
código anteriorRepresenta el ancho de cada columna.100pxy luego se llena automáticamente hasta que el contenedor no puede contener más columnas.
Aparte deauto-filly una palabra claveauto-fit , el comportamiento de ambos es básicamente el mismo.Solo cuando el contenedor es lo suficientemente ancho para acomodar todas las celdas en una fila y el ancho de las celdas no es fijodiferencias de comportamiento：auto-fillEl ancho restante se llenará con celdas vacías.auto-fitIntentará ampliar el ancho de la celda.
(3) palabra clave fr
Para expresar convenientemente relaciones proporcionales, el diseño de cuadrícula proporcionafr Palabra clave (abreviatura de fracción, que significa "fragmento").Si los anchos de las dos columnas son1fry2fr, lo que significa que este último es el doble que el primero.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
código anteriorRepresenta dos columnas del mismo ancho.
frSe puede utilizar junto con unidades de longitud absoluta, lo cual es muy conveniente.
.container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
}
código anteriorsignifica que la primera columna tiene 150 píxeles de ancho y la segunda columna tiene la mitad de ancho que la tercera columna.
(4) mín máx ()
minmax() La función produce un rango de longitud, lo que indica que la longitud está dentro de este rango. Acepta dos parámetros, el valor mínimo y el valor máximo.
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
En el código anterior,minmax(100px, 1fr)Indica que el ancho de la columna no es menor que100px,no mayor que1fr。
(5) palabra clave automática
autoLa longitud de la representación de las palabras clave la determina el propio navegador.
grid-template-columns: 100px auto 100px;
En el código anterior, el ancho de la segunda columna es básicamente igual al ancho máximo de la celda en la columna, a menos que se establezca el contenido de la celda.min-widthy este valor es mayor que el ancho máximo.
(6) Nombre de las líneas de la cuadrícula
grid-template-columnsatributos ygrid-template-rowsEn las propiedades, también puede utilizar corchetes para especificar el nombre de cada línea de la cuadrícula para facilitar su referencia en el futuro.
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
El código anterior especifica un diseño de cuadrícula de 3 filas x 3 columnas, por lo que hay 4 líneas de cuadrícula verticales y 4 líneas de cuadrícula horizontales. Dentro de los corchetes están los nombres de las ocho líneas.
El diseño de cuadrícula permite varios nombres para la misma línea, como[fifth-line row-5]。
(7) Ejemplo de diseño
grid-template-columns Las propiedades son muy útiles para el diseño de páginas web. El diseño de dos columnas solo requiere una línea de código.
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
}
El código anterior establece la columna de la izquierda en 70% y la columna de la derecha en 30%.
El diseño tradicional de doce cuadrículas también es fácil de escribir.
grid-template-columns: repeat(12, 1fr);
grid-row-gapLa propiedad establece el espacio entre filas (interlineado),grid-column-gapLa propiedad establece el espacio entre columnas (espaciado entre columnas).
.container {
grid-row-gap: 20px;
grid-column-gap: 20px;
}
código anteriormedio,grid-row-gapSe utiliza para establecer el interlineado,grid-column-gapSe utiliza para establecer el espaciado de las columnas.
grid-gapLas propiedades songrid-column-gapygrid-row-gapLa forma abreviada combinada de , la sintaxis es la siguiente.
grid-gap: <grid-row-gap> <grid-column-gap>;
Por lo tanto, el fragmento de código CSS anterior es equivalente al siguiente código.
.container {
grid-gap: 20px 20px;
}
sigrid-gapEl segundo valor se omite y el navegador considera que el segundo valor es igual al primer valor.
Según los últimos estándares, los tres nombres de atributos anteriores
grid-El prefijo ha sido eliminado,grid-column-gapygrid-row-gapEscrito comocolumn-gapyrow-gap，grid-gapEscrito comogap。
El diseño de cuadrícula le permite especificar "áreas", que se componen de una o varias celdas.grid-template-areasLas propiedades se utilizan para definir áreas.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas:
'a b c'
'd e f'
'g h i';
}
El código anterior primero divide 9 celdas y luego las nombraallegariLas nueve áreas corresponden a estas nueve celdas respectivamente.
El método de escritura para fusionar varias celdas en un área es el siguiente.
grid-template-areas:
'a a a'
'b b b'
'c c c';
El código anterior divide 9 celdas ena、b、ctres áreas.
A continuación se muestra un diseño de ejemplo.
grid-template-areas:
'header header header'
'main main sidebar'
'footer footer footer';
En el código anterior, la parte superior es el área del encabezado.header, la parte inferior es el área del pie de páginafooter, la parte media esmainysidebar。
Si algunas áreas no necesitan ser explotadas, use "puntos" (.)expresar.
grid-template-areas:
'a . c'
'd . f'
'g . i';
En el código anterior, la columna del medio es un punto, lo que significa que la celda no se utiliza o que la celda no pertenece a ningún área.
Tenga en cuenta que la denominación de las regiones afecta a las líneas de la cuadrícula.La línea de la cuadrícula inicial de cada área se nombra automáticamente
区域名-start, la línea de cuadrícula terminada recibe un nombre automáticamente区域名-end。Por ejemplo, el área se llama
header, entonces las líneas de la cuadrícula horizontal y las líneas de la cuadrícula vertical en la posición inicial se llamanheader-start, las líneas de la cuadrícula horizontal y las líneas de la cuadrícula vertical en la posición final se llamanheader-end。
Una vez dividida la cuadrícula, los elementos secundarios del contenedor se colocarán automáticamente en cada cuadrícula en orden. El orden de colocación predeterminado es "primera fila, segunda columna", es decir, primero complete la primera fila y luego comience a colocar la segunda fila, que es el orden de los números en la figura siguiente.
Esta orden viene dada porgrid-auto-flowDeterminado por el atributo, el valor predeterminado esrow , es decir, "fila primero, luego fila".También puedes configurarlo encolumn, se convierte en "primero la línea, luego la fila".
grid-auto-flow: column;
código anteriorya configuradocolumnA partir de ahora, el orden de colocación será el que se muestra a continuación.
grid-auto-flowAdemás de establecer el atributo enrowycolumn, también se puede configurar enrow denseycolumn dense . Estos dos valores se utilizan principalmente para colocar automáticamente los elementos restantes después de que se asignan posiciones a ciertos elementos.
Ejemplo a continuaciónDeje que el proyecto No. 1 y el proyecto No. 2 ocupen dos celdas cada uno, y luego en el valor predeterminadogrid-auto-flow: rowEn este caso, se producirá el siguiente diseño.
En la imagen de arriba, la posición detrás del elemento número 1 está vacía. Esto se debe a que el elemento número 3 sigue al elemento número 2 de forma predeterminada, por lo que se clasificará detrás del elemento número 2.
Ahora modifique la configuración y configúrela enrow dense, significa "primera fila, segunda columna" y rellénela lo más ajustadamente posible sin espacios.
grid-auto-flow: row dense;
código anteriorEl efecto es el siguiente.
La imagen de arriba llenará primero la primera fila, luego la segunda fila, por lo que el elemento 3 seguirá al elemento 1. Los artículos No. 8 y No. 9 se colocarán en la cuarta fila.
Si cambia la configuración acolumn dense, significa "primero columna, luego fila" y complete los espacios tanto como sea posible.
grid-auto-flow: column dense;
código anteriorEl efecto es el siguiente.
La imagen de arriba llenará primero la primera columna y luego la segunda, por lo que el elemento número 3 está en la primera columna y el elemento número 4 está en la segunda columna. Los elementos 8 y 9 se incluyeron en la cuarta columna.
justify-itemsLa propiedad establece la posición horizontal del contenido de la celda (izquierda, centro, derecha),align-itemsLa propiedad establece la posición vertical (superior, media, inferior) del contenido de la celda.
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
Estos dos atributos se escriben exactamente igual y pueden tomar los siguientes valores.
- inicio: alinea el borde inicial de la celda.
- final: Alinear con el borde final de la celda.
- centro: Centro dentro de la celda.
- estirar: estirar para ocupar todo el ancho de la celda (valor predeterminado).
.container {
justify-items: start;
}
código anteriorIndica que el contenido de la celda está alineado a la izquierda y el efecto es el que se muestra a continuación.
.container {
align-items: start;
}
código anteriorIndica que el contenido de la celda está alineado con la cabeza y el efecto es el que se muestra a continuación.
place-itemsLas propiedades sonalign-itemsatributos yjustify-itemsLa forma abreviada combinada de la propiedad.
place-items: <align-items> <justify-items>;
A continuación se muestra un ejemplo.
place-items: start end;
Si se omite el segundo valor, el navegador lo considera igual al primer valor.
justify-contentEl atributo es la posición horizontal de toda el área de contenido dentro del contenedor (izquierda, centro, derecha),align-contentEl atributo es la posición vertical de toda el área de contenido (arriba, medio, abajo).
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
Estos dos atributos se escriben exactamente igual y pueden tomar los siguientes valores. (Las imágenes a continuación están basadas enjustify-contentPor ejemplo, propiedadesalign-content El diagrama de atributos es exactamente el mismo, excepto que la orientación horizontal se cambia a orientación vertical. )
- inicio: el borde inicial del contenedor alineado.
- end: alinea el borde final del contenedor.
- centro: centra el contenedor en el interior.
- estirar: cuando no se especifica el tamaño del elemento, estírelo para ocupar todo el contenedor de la cuadrícula.
- espacio alrededor: espacio igual en ambos lados de cada elemento. Por lo tanto, el espacio entre elementos es dos veces mayor que el espacio entre los elementos y el borde del contenedor.
- espacio entre: hay un espacio igual entre los elementos y no hay espacio entre los elementos y el borde del contenedor.
- space-evenly: el espacio entre los elementos es igual y el espacio entre los elementos y el borde del contenedor tiene la misma longitud.
place-contentLas propiedades sonalign-contentatributos yjustify-contentLa forma abreviada combinada de la propiedad.
place-content: <align-content> <justify-content>;
A continuación se muestra un ejemplo.
place-content: space-around space-evenly;
Si omite el segundo valor, el navegador supone que el segundo valor es igual al primer valor.
A veces, a algunos elementos se les asignan posiciones fuera de la cuadrícula existente. Por ejemplo, la cuadrícula tiene solo 3 columnas, pero un determinado elemento se especifica en la quinta fila. En este momento, el navegador generará automáticamente cuadrículas adicionales para facilitar la ubicación de los elementos.
grid-auto-columnsatributos ygrid-auto-rows Las propiedades se utilizan para establecer el ancho de la columna y el alto de la fila de la cuadrícula redundante creada automáticamente por el navegador.Están escritos de la misma manera quegrid-template-columnsygrid-template-rows Exactamente lo mismo. Si no se especifican estas dos propiedades, el navegador determina el ancho de la columna y el alto de la fila de la nueva cuadrícula basándose completamente en el tamaño del contenido de la celda.
Ejemplo a continuaciónEn el interior, la cuadrícula dividida tiene 3 filas x 3 columnas, pero el elemento número 8 se especifica en la cuarta fila y el elemento número 9 se especifica en la quinta fila.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;
}
El código anterior especifica que la altura de la nueva fila es uniformemente de 50 px (la altura de la fila original es de 100 px).
grid-templateLas propiedades songrid-template-columns、grid-template-rowsygrid-template-areasLa forma abreviada combinada de estas tres propiedades.
gridLas propiedades songrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowLa abreviatura combinada de estas seis propiedades.
Desde la perspectiva de la facilidad de lectura y escritura, se recomienda no fusionar atributos, por lo que estos dos atributos no se presentarán en detalle aquí.
Las siguientes propiedades están definidas en el proyecto.
Se puede especificar la posición del proyecto. El método específico es especificar los cuatro bordes del proyecto y qué líneas de cuadrícula se ubican respectivamente.
grid-column-startPropiedades: Líneas de cuadrícula verticales donde se encuentra el borde izquierdo.grid-column-endPropiedad: la línea de cuadrícula vertical donde se encuentra el borde derecho.grid-row-startPropiedades: la línea de cuadrícula horizontal donde se encuentra el borde superior.grid-row-endPropiedades: la línea de cuadrícula horizontal donde se encuentra el borde inferior.
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
código anteriorEspecifica que el borde izquierdo del elemento 1 es la segunda línea de cuadrícula vertical y el borde derecho es la cuarta línea de cuadrícula vertical.
En la imagen de arriba, solo se especifican los bordes izquierdo y derecho del elemento No. 1, y los bordes superior e inferior no se especifican, por lo que se utilizará la posición predeterminada, es decir, el borde superior es la primera línea de la cuadrícula horizontal. y el borde inferior es la segunda línea de la cuadrícula horizontal.
Excepto el elemento número 1, otros elementos no tienen posiciones especificadas y el navegador los presenta automáticamente. En este momento, sus posiciones están determinadas por el contenedor.grid-auto-flowDeterminado por el atributo, el valor predeterminado de este atributo esrow , por lo que se organizarán "primero fila, luego columna".Los lectores pueden cambiar el valor de este atributo acolumn、row denseycolumn dense, para ver cómo han cambiado las posiciones de otros elementos.
Ejemplo a continuaciónEs el efecto de especificar las posiciones de cuatro fronteras.
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
Los valores de estos cuatro atributos, además de especificarse como el número de línea de la cuadrícula, también se pueden especificar como el nombre de la línea de la cuadrícula.
.item-1 {
grid-column-start: header-start;
grid-column-end: header-end;
}
En el código anterior, las posiciones de los bordes izquierdo y derecho se especifican como los nombres de las líneas de la cuadrícula.
Los valores de estos cuatro atributos también se pueden utilizar.spanPalabra clave que indica "intervalo", es decir, cuántas cuadrículas se extienden entre los bordes izquierdo y derecho (bordes superior e inferior).
.item-1 {
grid-column-start: span 2;
}
código anteriorIndica que el borde izquierdo del elemento No. 1 abarca 2 cuadrículas desde el borde derecho.
Esto está relacionado concódigo a continuaciónEl efecto es exactamente el mismo.
.item-1 {
grid-column-end: span 2;
}
Usando estos cuatro atributos, si hay una superposición de elementos, usez-indexLa propiedad especifica el orden de superposición de los elementos.
grid-columnLas propiedades songrid-column-startygrid-column-endLa forma abreviada combinada degrid-rowLas propiedades songrid-row-startatributos ygrid-row-endLa abreviatura combinada de .
.item {
grid-column: <start-line/ <end-line>;
grid-row: <start-line/ <end-line>;
}
A continuación se muestra un ejemplo.
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
En el código anterior, el proyectoitem-1Ocupa la primera fila, desde la primera línea de la columna hasta la tercera línea de la columna.
Entre estos dos atributos, también puedes usarspanPalabra clave que indica cuántas cuadrículas abarcar.
.item-1 {
background: #b03532;
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
background: #b03532;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
código anterioren, proyectoitem-1El área ocupada incluye la primera fila + segunda fila y la primera columna + segunda columna.
La barra diagonal y las siguientes partes se pueden omitir y abarcar una cuadrícula de forma predeterminada.
.item-1 {
grid-column: 1;
grid-row: 1;
}
En el código anterior, el proyectoitem-1Ocupa la primera cuadrícula en la esquina superior izquierda.
grid-areaEl atributo especifica el área en la que se coloca el artículo.
.item-1 {
grid-area: e;
}
código anteriorEn , el Proyecto No. 1 se ubica eneárea, el efecto es como se muestra a continuación.
grid-areaLas propiedades también se pueden utilizar comogrid-row-start、grid-column-start、grid-row-end、grid-column-endEl formulario de abreviatura fusionado especifica directamente la ubicación del proyecto.
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
A continuación se muestra unejemplo。
.item-1 {
grid-area: 1 / 1 / 3 / 3;
}
justify-selfLa propiedad establece la posición horizontal (izquierda, centro, derecha) del contenido de la celda, seguida dejustify-itemsLas propiedades se usan exactamente igual, pero solo se aplican a un único elemento.
align-selfLa propiedad establece la posición vertical (superior, media, inferior) del contenido de la celda, seguida dealign-itemsEl uso de atributos es exactamente el mismo y solo afecta a un único proyecto.
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
Ambas propiedades pueden tomar los siguientes cuatro valores.
A continuación esjustify-self: startejemplo de.
.item-1 {
justify-self: start;
}
place-selfLas propiedades sonalign-selfatributos yjustify-selfLa forma abreviada combinada de la propiedad.
place-self: <align-self> <justify-self>;
A continuación se muestra un ejemplo.
place-self: center center;
Si se omite el segundo valor,place-selfLa propiedad considerará que los dos valores son iguales.
Se ha dedicado a la investigación de tecnología durante más de treinta años, domina varios lenguajes como java, linux, javascript, php, css, etc., y ha realizado muchas contribuciones en el campo del código abierto. una estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.
Correo[email protected]