Comprender el diseño de la cuadrícula en un artículo

¿Qué es el diseño de cuadrícula?

GridEse diseño de cuadrícula de diseño, es un nuevo CSSmodelo de diseño, mejor en una página se divide en varias áreas principales, además de definir el tamaño de estas regiones, la posición, el nivel y otras relaciones. Afirma ser el CSSdiseño más poderoso del programa, es actualmente el único CSSdiseño bidimensional. Utilice el Griddiseño, podemos lograr fácilmente similar al siguiente diseño, dirección de demostración

Diseño de cuadrícula y diseño flexible

Hablamos sobre el diseño, pensaremos en flexel diseño, e incluso sugerimos que tantos como flexdiseño, y parece que no hay necesidad de conocer Gridel diseño. Sin embargo, flexel diseño y Gridel diseño tienen una diferencia sustancial, es decir, flexel diseño es unidimensional, Gridel diseño es bidimensional . flexEl diseño solo puede manejar el diseño de elementos en una dimensión a la vez, una fila o una columna. GridEl diseño consiste en dividir el contenedor en "filas" y "columnas" para producir una cuadrícula. Podemos colocar los elementos de la cuadrícula en posiciones relacionadas con estas filas y columnas para lograr nuestro propósito de diseño.

GridDiseño que el flexdiseño de los fuertes!

Ejemplo de diseño flexible:

Ejemplo de diseño de cuadrícula:

Algunos conceptos básicos de Grid

Usamos Grid para implementar un pequeño ejemplo para demostrar algunos conceptos básicos de Grid y demostrar la dirección

<div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
</div>
复制代码

.wrapper {
  margin: 60px;
  
  display: grid;
  
  grid-template-columns: repeat(3, 200px);
  
  grid-gap: 20px;
  
  grid-template-rows: 100px 200px;
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}
复制代码

Contenedor y proyecto: Declaramos sobre los elementos display：grido display：inline-gridpara crear un contenedor de malla. Una vez que hagamos esto, todos los hijos inmediatos de este elemento se convertirán en elementos de la cuadrícula. Como los .wrapperelementos anteriores como una cuadrícula donde el contenedor será elementos de cuadrícula de elementos secundarios inmediatos.

Cuadrícula de seguimiento: grid-template-columnsy grid-template-rowsatributos para definir una cuadrícula de filas y columnas. Las áreas horizontales dentro del contenedor se denominan filas y las áreas verticales se denominan columnas. La figura anterior One, Two, Threela composición de la Onefila, Foures una

Unidad de cuadrícula: Una unidad de cuadrícula es la unidad más pequeña en un elemento de cuadrícula. Conceptualmente, en realidad es muy similar a una celda en una tabla. La figura anterior One, Two,, Three... Foures una de las unidades de rejilla

Línea de cuadrícula: la línea que divide la cuadrícula, llamada "línea de cuadrícula". Cabe señalar que cuando definimos una cuadrícula, definimos una pista de cuadrícula, no una línea de cuadrícula. Grid creará líneas de cuadrícula numeradas para que podamos ubicar cada elemento de la cuadrícula. La columna m tiene m + 1 líneas de cuadrícula verticales, y la fila n tiene n + 1 y líneas de cuadrícula horizontales. Por ejemplo, en el ejemplo anterior, hay 4 líneas de cuadrícula verticales. En términos generales, los números se ordenan de izquierda a derecha, de arriba a abajo, 1, 2 y 3. Por supuesto, también puede ordenar los números de derecha a izquierda, de abajo hacia arriba, en el orden de -1, -2, -3 ...

Introducción a las propiedades del contenedor

GridMuchos atributos y valores relacionados con el diseño requieren mucha memoria, se recomienda democombinarlos juntos, comprender el lado del código y luego usar algo de tiempo libre para recordarlo. Presentaré cada atributo cuando sea una pequeña demodemostración, sugiero que pueda modificar su propia mirada al efecto para mejorar la memoria.

GridLos atributos de diseño se pueden dividir en dos categorías, una es atributos de contenedor y la otra es atributos de artículo. Veamos primero las propiedades del contenedor.

atributo de visualización

mostrar demostración de propiedad

A través de una declaración sobre los elementos display：grido display：inline-gridpara crear un contenedor de malla. Declare que display：gridla embarcación es un elemento de bloque, siempre que display: inline-gridel elemento de línea dentro del elemento de contenedor

.wrapper {
  display: grid;
}
复制代码

.wrapper-1 {
  display: inline-grid;
}
复制代码

propiedad grid-template-columnas y propiedad grid-template-rows

Dirección de demostración de las propiedades de las columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula

grid-template-columnsEstablecer las propiedades de ancho de columna, grid-template-rowslínea de propiedad alta, estos dos atributos son Gridparticularmente importantes en el diseño, sus valores son diversos, pero su disposición es más similar, para lo siguiente grid-template-columnspara explicar las propiedades

Ancho de columna fijo y alto de fila

.wrapper {
  display: grid;
  
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  
  grid-template-rows: 50px 50px;
}
复制代码

Lo anterior significa que el ancho fijo de la columna es 200px 100px 200px, y la altura de la fila es 50px 50px

función repeat () : puede simplificar valores repetidos. Esta función acepta dos parámetros, el primer parámetro es el número de repeticiones y el segundo parámetro es el valor a repetir. Por ejemplo, las alturas de las filas de arriba son todas iguales, podemos lograr esto, el efecto real es exactamente el mismo

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}
复制代码

Palabra clave de autocompletar : indica el llenado automático, de modo que se puedan acomodar tantas celdas como sea posible en una fila (o columna). grid-template-columns: repeat(auto-fill, 200px)Indica que el ancho de la columna es de 200 px, pero el número de columnas no es fijo. Siempre que el navegador pueda acomodarlo, puedes colocar elementos. El código y el efecto se muestran en la siguiente figura:

.wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

fr Palabras clave : El Griddiseño también introduce una unidad de longitud adicional para ayudarnos a crear pistas de cuadrícula flexibles. frLa unidad representa una parte igual del espacio disponible en el contenedor de cuadrícula. grid-template-columns: 200px 1fr 2frIndica que el ancho de la primera columna se establece en 200px, y el ancho restante se divide en dos partes, los anchos son respectivamente 1/3 y 2/3 del ancho restante. El código y el efecto se muestran en la siguiente figura:

.wrapper-3 {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Función minmax () : A veces queremos darle al elemento de la cuadrícula un tamaño mínimo y máximo La minmax()función genera un rango de longitud, lo que significa que la longitud se puede aplicar al proyecto de la cuadrícula dentro de este rango. Acepta dos parámetros, mínimo y máximo. grid-template-columns: 1fr 1fr minmax(300px, 2fr)Significa que el ancho de la tercera columna es de al menos 300 px, pero el máximo no puede ser mayor que el doble del ancho de la primera y la segunda columna. El código y el efecto son los siguientes:

.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Palabra clave automática : la longitud la determina el navegador. Por autopalabra clave, podemos lograr fácilmente un diseño de tres o dos columnas. grid-template-columns: 100px auto 100pxIndica que la primera y tercera columna son 100px, y la longitud la determina el navegador. El código y el efecto son los siguientes:

.wrapper-5 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

propiedad grid-row-gap, propiedad grid-column-gap y propiedad grid-gap

Atributo de cuadrícula-fila-brecha, atributo de cuadrícula-columna-brecha y dirección de demostración del atributo de cuadrícula-brecha

grid-row-gapLos atributos y grid-column-gapatributos establecen el espaciado entre filas y entre columnas, respectivamente. grid-gapEl atributo es una forma abreviada de ambos.

grid-row-gap: 10pxIndica que el espacio entre líneas es de 10 píxeles y grid-column-gap: 20pxel espacio entre columnas es de 20 píxeles. grid-gap: 10px 20pxEl efecto logrado es el mismo

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-auto-rows: 50px;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}
复制代码

Los dos métodos de escritura anteriores tienen el mismo efecto.

áreas de plantilla de cuadrícula 属性

dirección de demostración del área de cuadrícula y áreas de plantilla de cuadrícula

grid-template-areas Los atributos se utilizan para definir áreas y un área se compone de una o más celdas

General Esta propiedad con elementos de malla grid-areausados ​​juntos, estamos aquí para presentarlos juntos. grid-areaEl atributo especifica en qué área se coloca el artículo.

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}
复制代码

El código anterior está dividido en 6 y representa celdas, lo que vale la pena señalar que el .símbolo que representa la celda vacía, es decir, la celda no se usa.

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}
复制代码

El código anterior muestra que un .sidebar .content .headerelemento de clase está ubicado en la parte superior grid-template-areasdel sidebar content headerárea definida

propiedad grid-auto-flow

dirección de demostración de la propiedad grid-auto-flow

grid-auto-flowLos atributos controlan cómo funciona el algoritmo de diseño automático, especificando con precisión cómo se organizan los elementos que se distribuyen automáticamente en la cuadrícula. El orden predeterminado se coloca "la primera fila", es decir, para llenar la primera fila, a continuación, en que comience la segunda línea, es decir, la secuencia en la figura alfanumérico one, two, three.... El orden de la grid-auto-flowpropiedad determina que el valor predeterminado es row.

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Los estudiantes atentos pueden haber encontrado un problema, es decir, hay una brecha entre el quinto elemento y el sexto elemento (como se muestra en la figura siguiente). Esto se debe a que la longitud del sexto bloque es mayor que la longitud del espacio en blanco, y fue exprimido hasta el fondo. Causado por una línea. En aplicaciones prácticas, es posible que deseemos la siguiente longitud para llenar este espacio en blanco con una longitud adecuada. Este tiempo se puede configurar grid-auto-flow: row densepara llenar el formulario tanto como sea posible. El código y el efecto son los siguientes:

.wrapper-2 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row dense;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Se puede configurar grid-auto-flow: column, indicando que a la primera columna le sigue la fila, el código y el efecto se muestran en la siguiente figura:

.wrapper-1 {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows:  50px 50px;
}
复制代码

atributo justify-items, atributo align-items y atributo place-items

Atributo Justify-items, dirección de demostración del atributo align-items

justify-itemsLa propiedad establece la posición horizontal del contenido de la celda (izquierda, centro, derecha) y la align-itemspropiedad establece la posición vertical de la celda (superior, media, inferior)

Lo siguiente toma el atributo justify-items como un ejemplo para explicar, el atributo align-items es el mismo, pero la dirección es vertical. Todos tienen los siguientes atributos:

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
复制代码

La implementación y los efectos del código son los siguientes:

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-items: start;
}
.wrapper-1 {
  justify-items: end;
}
.wrapper-2 {
  justify-items: center;
}
.wrapper-3 {
  justify-items: stretch;
}
复制代码

• inicio: alinea el borde inicial de la celda

• fin: alinea el borde final de la celda

• center: Centra el interior de la celda

• estirar: estirar para ocupar todo el ancho de la celda (valor predeterminado)

atributo de justificación de contenido, atributo de alineación de contenido y atributo de contenido de lugar

Atributo de justificación de contenido, dirección de demostración de atributo de alineación de contenido

justify-contentEl atributo es la posición horizontal de toda el área de contenido en el contenedor (izquierda, centro, derecha) y el align-contentatributo es la posición vertical de toda el área de contenido (superior, media e inferior). Todos tienen los siguientes valores de atributo.

.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;  
}
复制代码

En la siguiente justify-contentpropiedad como ejemplo para explicar, align-contentatributo De manera similar, solo la dirección es la dirección vertical

• iniciar-alinear el borde inicial del contenedor
• alinear el borde final del contenedor
• centro-el centro del contenedor

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-content: start;
}
.wrapper-1 {
  justify-content: end;
}
.wrapper-2 {
  justify-content: center;
}
复制代码

• space-around-El espacio en ambos lados de cada elemento es igual. Por lo tanto, el espacio entre los elementos es dos veces más grande que el espacio entre los elementos y el borde del contenedor.
• espacio-entre-el espacio entre el artículo y el artículo es igual, no hay espacio entre el artículo y el borde del contenedor
• espacio uniforme: el espacio entre el artículo y el artículo es igual, y el espacio entre el artículo y el borde del contenedor es de la misma longitud
• estiramiento: cuando no se especifica el tamaño del elemento, el estiramiento ocupa todo el contenedor de la cuadrícula

.wrapper-3 {
  justify-content: space-around;
}
.wrapper-4 {
  justify-content: space-between;
}
.wrapper-5 {
  justify-content: space-evenly;
}
.wrapper-6 {
  justify-content: stretch;
}
复制代码

propiedad grid-auto-columnas y propiedad grid-auto-rows

dirección de demostración de la propiedad grid-auto-columns y de la propiedad grid-auto-rows

Hablando de grid-auto-columnspropiedad y propiedad grid-auto-rowsanterior, eche un vistazo al concepto de cuadrícula implícita y de visualización

Implícita y mostrar la cuadrícula : la red contenida explícitamente en sus grid-template-columnsy grid-template-rowsde fila y columna atributos están definidos. Si coloca algo fuera de la definición de la cuadrícula o necesita más pistas de cuadrícula debido a la cantidad de contenido, la cuadrícula creará filas y columnas en la cuadrícula implícita

Si hay una cuadrícula adicional (es decir, una cuadrícula implícita mencionada anteriormente), entonces el ancho de la columna y la altura de la línea pueden tener grid-auto-columnspropiedades y grid-auto-rowsconfiguraciones de propiedades. Y su redacción grid-template-columnsy grid-template-rowsla misma. Si no especifica estos dos atributos, el navegador determinará el ancho de la columna y la altura de la fila de la nueva cuadrícula basándose completamente en el tamaño del contenido de la celda.

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px;

  grid-template-rows: 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

grid-template-columnsAtributos y grid-template-rowsatributo solo especifica dos filas y dos columnas, pero en realidad hay nueve elementos, tendrá una cuadrícula implícita. Por grid-auto-rowsespecificar implícitamente 50px de altura de las líneas de la cuadrícula

Introducción a los atributos del proyecto

propiedad grid-column-start, propiedad grid-column-end, propiedad grid-row-start y propiedad grid-row-end

Dirección de demostración

Puede especificar los cuatro bordes donde se encuentra el elemento de la cuadrícula y qué línea de la cuadrícula ubicar respectivamente, para especificar la posición del elemento

• propiedad grid-column-start: la línea de cuadrícula vertical donde se encuentra el borde izquierdo
• propiedad grid-column-end: la línea de cuadrícula vertical donde se encuentra el borde derecho
• propiedad grid-row-start: la línea de cuadrícula horizontal donde se encuentra el borde superior
• propiedad grid-row-end: la línea de cuadrícula horizontal donde se encuentra el borde inferior

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #19CAAD;
}
.two { 
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  
  z-index: 1;
  background: #8CC7B5;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #D1BA74;
}
.four {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #BEE7E9;
}
.five {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #E6CEAC;
}
.six {
  grid-column: 3;
  grid-row: 4;
  background: #ECAD9E;
}
复制代码

En el código anterior, .twose encuentra el proyecto de cuadrícula de clase , las líneas de cuadrícula verticales son de 2 a 4, las líneas de cuadrícula horizontales son de 1-2. Entre ellos, .threeentra en conflicto con (las líneas de cuadrícula verticales son de 3 a 4, y las líneas de cuadrícula horizontales son de 1 a 4). Puede configurar z-indexpara decidir su jerarquía

propiedad de área de cuadrícula

grid-areaEl atributo especifica el proyecto en una región que, en la introducción anterior grid-template-areas, cuando se menciona, ya no hay una expansión específica, el uso de una referencia específica puede demostrar Dirección:

dirección de demostración de la propiedad grid-area y grid-template-areas

Atributo de justificación-yo, atributo de alineación-yo y atributo de lugar-yo

Dirección de demostración del atributo justify-self / align-self atributo / place-self atributo

justify-selfPropiedad del contenido de la celda de la posición horizontal (izquierda, derecha), con justify-itemsel uso de la propiedad exactamente igual, pero actúa solo en un solo proyecto

align-self La propiedad establece la posición vertical del contenido de la celda (superior, media e inferior), que es exactamente igual que el uso de la propiedad align-items, y solo afecta a un solo elemento.

Ambos muy similares, aquí solo toman justify-selfatributo de presentación align-selfatributo De manera similar, solo actúan en dirección vertical

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
复制代码

.item {
  justify-self: start;
}
.item-1 {
  justify-self: end;
}
.item-2 {
  justify-self: center;
}
.item-3 {
  justify-self: stretch;
}
复制代码

• inicio: alinea el borde inicial de la celda

• fin: alinea el borde final de la celda

• center: Centra el interior de la celda

  

• estirar: estirar para ocupar todo el ancho de la celda (valor predeterminado)

  

Diseño receptivo real de combate real de cuadrícula

Después de la introducción anterior, creo que todos pueden ver que Grid es muy poderoso. Algunos diseños comunes de CSS, como el diseño centrado de dos columnas, el diseño de tres columnas, etc., son fáciles de implementar. Echemos un vistazo a cómo el diseño de cuadrícula implementa el diseño receptivo

fr se da cuenta de la respuesta de división igual

fr se da cuenta de la respuesta de división igual

frLa unidad de división igual, que puede dividir el espacio disponible del contenedor en tantos espacios de división iguales como se desee. Con esta función, podemos implementar fácilmente una respuesta dividida en partes iguales. grid-template-columns: 1fr 1fr 1frIndica que el contenedor está dividido en tres partes iguales

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

repetir + ajuste automático: corrige el ancho de la columna y cambia el número de columnas

El diseño de alícuotas no es el único Griddiseño, ya que el flexdiseño se puede lograr fácilmente, luego busque una respuesta más avanzada

El ejemplo anterior es siempre de tres columnas, pero a menudo queremos que nuestra cuadrícula pueda fijar el ancho de la columna y cambiar el número de columnas de acuerdo con el ancho del contenedor. Esta vez, podemos utilizar las repeat()funciones y auto-fitpalabras clave mencionadas anteriormente . grid-template-columns: repeat(auto-fit, 200px)Indica que el ancho de columna fijo es 200px y el número es adaptable. Siempre que se pueda acomodar, se organizará hacia arriba. El código y los efectos se implementan de la siguiente manera:

Dirección de demostración

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

repetir + autoajuste + minmax quitar el espacio en blanco a la derecha

En el efecto visto arriba, generalmente hay un espacio en blanco en el lado derecho, que es lo que no queremos ver. Sería genial si el ancho de la columna también pudiera adaptarse dentro de un cierto rango. minmax()La función nos ayuda a hacer esto. El grid-template-columns: repeat(auto-fit, 200px)cambio grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))indica que el ancho de la columna de al menos 200 px, si hay una alícuota de repuesto juntos. El código y el efecto son los siguientes:

Dirección de demostración

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

repetir + auto-ajuste + minmax-span-dense resolver el problema de vacantes

Todo parece ir bien, pero la interfaz de usuario de un día, la longitud de cada elemento de la cuadrícula puede no ser la misma, lo cual es simple, spanejecutando el intervalo para establecer las palabras clave del proyecto de la cuadrícula grid-column-start: span 3, lo que indica que el lapso del proyecto de 3 cuadrículas. El código específico y el efecto son los siguientes:

.item-3 {
  grid-column-start: span 3;
}
复制代码

Dirección de demostración

No, ¿por qué hay un espacio en blanco en el lado derecho? Hay algo de longitud original que es demasiado larga, no se puede soltar, esta vez a nuestra denseclave de juego. grid-auto-flow: row denseMedios para llenar lo máximo posible, sin dejar espacios en blanco, el código y efecto son los siguientes:

.wrapper, .wrapper-1 {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper-1 {
  grid-auto-flow: row dense;
}
复制代码

Compatibilidad de diseño de cuadrícula

Finalmente, hable sobre Gridel diseño de los problemas de compatibilidad, en caniuse , podemos ver los resultados de la siguiente manera, la compatibilidad general también es buena, pero no es compatible con IE 10 o menos. La sugerencia personal no es un problema para usar en el sistema interno de la empresa, pero el TOC puede no ser adecuado por ahora.