CSS Grid es un sistema de diseño basado en cuadrículas bidimensionales que le permite crear diseños de sitios web organizados y flexibles. Piense en ello como una cuadrícula de columnas y filas que puede utilizar para posicionar y organizar elementos de la página web. Sin embargo, a diferencia de las tablas HTML, los diseños CSS Grid se controlan con CSS y no con marcado HTML. Esto hace que CSS Grid sea extremadamente flexible para el diseño web responsivo.
Cómo funciona CSS Grid en Blocs
Al trabajar con CSS Grid dentro Blocs, es importante tener en cuenta que el diseño de cuadrícula se compone de dos elementos principales, un contenedor de cuadrícula principal y, en la mayoría de los casos, varios contenedores secundarios internos.
Contenedor de cuadrícula principal
El contenedor de cuadrícula principal es responsable de la información de diseño principal. Por ejemplo, el número de columnas/filas y sus respectivas dimensiones de espacio se aplican a este elemento.
Contenedor secundario de cuadrícula
Los contenedores secundarios internos son los cuadros en los que normalmente colocaría los elementos de la interfaz de su sitio web. De forma predeterminada, estos contenedores están configurados para flujo automático (encajan en la cuadrícula), sin embargo, se pueden personalizar usando clases personalizadas para ubicarlos en una amplia variedad de formas, dentro del contenedor de la cuadrícula principal.
Puede leer más sobre cómo colocar contenedores secundarios aquí.
Agregar un contenedor de cuadrícula
Puedes comenzar a usar CSS Grid en tu Blocs proyecto agregando un contenedor CSS Grid usando el Bric dedicado.
O alternativamente, seleccionando un División Bric y estableciendo su tipo al contenedor de cuadrícula.
El diseño de cuadrícula CSS predeterminado en Blocs son dos columnas por dos filas. Cuando el diseño se ajusta de alguna manera, por ejemplo agregando columnas o filas adicionales, esta información de diseño personalizado se almacena en una clase personalizada que se aplica automáticamente al contenedor CSS Grid.
También vale la pena señalar que las columnas tienen un ancho de 1fr y las filas tienen su altura establecida en auto por defecto
Columnas
Las columnas son las divisiones verticales del espacio en el diseño de cuadrícula CSS y son particularmente útiles para guiar la vista del espectador, optimizar la legibilidad y utilizar el espacio de manera eficiente.
Agregar una columna
Se pueden agregar columnas adicionales a un contenedor CSS Grid haciendo clic en el botón más + ubicado en la esquina superior derecha de los controles de selección de Cuadrícula.
Eliminar una columna
Las columnas se pueden eliminar de un contenedor CSS Grid haciendo clic en el botón de papelera ubicado en la parte superior izquierda del controlador de ancho de columna.
Cuando el número de columnas or filas está personalizado, si no hay suficientes contenedores secundarios para mostrar correctamente el diseño, Blocs los insertará automáticamente en el contenedor CSS Grid.
También es importante recordar que CSS Grid utiliza CSS puro para controlar el diseño, lo que significa que se pueden agregar y eliminar columnas. por punto de interrupción.
Ancho de columna
De forma predeterminada, el ancho de una columna se establece en 1fr en contenedores CSS Grid dentro Blocs. fr unidad significa fracción. Representa una fracción del espacio disponible en el contenedor de la cuadrícula.
Cuando se utiliza para el ancho de columna, 1fr significa que la columna ocupará una fracción del espacio total disponible. Si varias columnas utilizan el fr unidad, el espacio se divide según el valor de fracción de cada columna en relación con la suma de los valores de fracción de todas las columnas.
El ancho de una columna se puede ajustar por punto de interrupción utilizando el controlador de cambio de tamaño que se encuentra en el control de ancho de columna. Arrastrando este identificador left or un Derecho ajustará el fr valor para la columna relacionada en incrementos de 0.5.
Espacio entre columnas
Puede establecer el espacio entre columnas en cada punto de interrupción arrastrando el espacio vacío entre las columnas dentro del contenedor de cuadrícula en el lienzo de diseño.
También puede restablecer la medida del espacio entre columnas de un contenedor CSS Grid mediante clic derecho en el espacio entre columnas y seleccionando Restablecer ancho.
filas
Las filas son las divisiones horizontales del espacio en el diseño de CSS Grid, aseguran que el contenido fluya de manera lógica y mantenga la alineación visual.
Agregar una fila
Se pueden agregar filas adicionales a un contenedor CSS Grid haciendo clic en el botón más + ubicado en la esquina inferior izquierda de los controles de selección de Cuadrícula.
Las filas funcionan de manera un poco diferente a las columnas, aunque puede agregar más filas; normalmente, la cantidad de filas se calcula y se ajusta automáticamente en función de la cantidad de columnas y contenedores secundarios dentro del contenedor de cuadrícula principal.
Eliminar una fila
El proceso de eliminar filas es un poco diferente al de eliminar columnas. Solo es posible eliminar filas cuando hay un número negativo de contenedores secundarios para el número de filas en el diseño de la cuadrícula.
Cuando el recuento de contenedores secundarios es negativo para una fila, se mostrará un botón de papelera en el borde superior del control de altura de la fila (que no tiene ningún contenedor secundario). Al hacer clic en este botón se eliminará la fila.
Altura de la fila
La altura predeterminada de una fila se establece en auto en contenedores CSS Grid dentro Blocs. auto La unidad esencialmente le dice a la cuadrícula que determine automáticamente la altura de esa fila en función de su contenido. En otras palabras, la fila será tan alta como el contenido más alto dentro de los contenedores secundarios de la cuadrícula de esa fila.
La altura de una columna se puede ajustar por punto de interrupción utilizando el controlador de cambio de tamaño que se encuentra en el control de altura de la fila. Arrastrando este identificador up or DE INSCRIPCIÓN ajustará la altura de la fila en píxeles.
Aunque esta opción está disponible, se recomienda utilizar auto para alturas de fila, ya que es más flexible con respecto a la capacidad de respuesta del diseño.
Espacio entre filas
Puede establecer el espacio entre filas en cada punto de interrupción arrastrando el espacio vacío entre las filas dentro del contenedor CSS Grid en el lienzo de diseño.
También puede restablecer la medida del espacio entre filas de un contenedor CSS Grid mediante clic derecho en el espacio entre columnas y seleccionando Restablecer altura.
Colocación de contenedores secundarios
De forma predeterminada, estos contenedores están configurados para flujo automático (encajan en la cuadrícula), sin embargo, se pueden personalizar de forma independiente utilizando clases personalizadas, para ubicarlos dentro del contenedor de la cuadrícula principal.
Para personalizar cómo se coloca un contenedor secundario de cuadrícula dentro de la cuadrícula, primero debe seleccionarlo y aplicar una clase personalizada.
Usando el Editor de clases, ahora es posible aplicar valores a la Elemento de cuadrícula reglas para el contenedor secundario seleccionado para posicionarlo en su respectivo contenedor principal CSS Grid.
Inicio de columna
El sistema inicio-columna-cuadrícula La propiedad se utiliza para indicar la línea de la cuadrícula de la columna donde comienza un elemento de la cuadrícula en un diseño de cuadrícula.
Extremo de columna
El sistema final de columna de cuadrícula La propiedad se utiliza para indicar cuántas columnas abarcará un elemento, o la línea de la cuadrícula de columnas donde termina un elemento de la cuadrícula en un diseño de cuadrícula.
Inicio de fila
El sistema inicio de fila de cuadrícula La propiedad se utiliza para indicar la línea de la cuadrícula de fila donde comienza un elemento de la cuadrícula en un diseño de cuadrícula.
Final de fila
El sistema fin de fila de cuadrícula La propiedad se utiliza para indicar cuántas filas abarcará un elemento, o la línea de fila donde termina un elemento de cuadrícula en un diseño de cuadrícula.
Técnicas de posicionamiento
Usando las propiedades de inicio de columna, final de columna, inicio de fila y final de fila, es posible colocar contenedores secundarios dentro del contenedor principal de CSS Grid. A continuación se muestran algunos ejemplos comunes de técnicas de posicionamiento infantil en cuadrículas.
Todos los ejemplos aquí pueden examinarse más a fondo en este Blocs proyecto de muestra.
Columnas de tramo
Para abarcar un contenedor secundario de cuadrícula en varias columnas, aplique una clase al contenedor secundario y luego establezca el valor Elementos de la cuadrícula > Columna > Fin valor del campo a lapso seguido del número de columnas que le gustaría abarcar al niño.
Filas de tramo
Para abarcar un contenedor secundario de cuadrícula en varias filas, aplique una clase al contenedor secundario y luego establezca el valor Elementos de la cuadrícula > Fila > Fin valor del campo a lapso seguido del número de filas que le gustaría abarcar al niño.
Cambiar posición horizontal
En este ejemplo, el contenedor secundario violeta se encuentra originalmente en la primera posición horizontal de la cuadrícula; al utilizar una clase personalizada, se mueve directamente a la segunda posición horizontal o segunda columna.
Para colocar un contenedor secundario de cuadrícula horizontalmente, aplique una clase al contenedor secundario y luego configure el Elementos de la cuadrícula > Columna > Inicio valor del campo al número de columna en el que desea colocarlo. También es importante establecer el Elementos de la cuadrícula > Fila > Inicio valor del campo al número de fila en el que desea que permanezca.
Cambiar posición vertical
En este ejemplo, el contenedor secundario violeta se encuentra originalmente en la primera posición vertical de la cuadrícula; mediante una clase personalizada, se mueve hacia abajo a la segunda posición vertical.
Para colocar un contenedor secundario de cuadrícula verticalmente, aplique una clase al contenedor secundario y luego configure el Elementos de la cuadrícula > Fila > Inicio valor del campo al número de fila en el que desea colocarlo.
Al colocar contenedores secundarios de la cuadrícula, es importante tener en cuenta que a otros contenedores secundarios de la cuadrícula se les pueden aplicar reglas de posicionamiento de clases contradictorias, lo que puede crear errores de diseño no deseados. Tenga cuidado de mantener organizadas sus clases de grid para evitar confusiones al crear con CSS Grid.
OTRAS LECTURAS
Este artículo está dirigido a principiantes que están dando sus primeros pasos con CSS Grid, si buscas información más profunda y avanzada sobre CSS Grid, te recomendamos leer esta guía introductoria sobre Cuadrícula CSS de Trucos CSS.