Una guía para CSS Grid: dominar diseños con propiedades de cuadrícula

Colocar elementos en una página web puede resultar muy complicado cuando se trabaja con diseños complejos. Aquí es donde la cuadrícula CSS resulta útil. Es un sistema de diseño diseñado para simplificar el proceso de creación de diseños complejos.

¿Cómo te ayuda? A diferencia de los métodos de diseño tradicionales que sólo le permiten colocar elementos en filas o columnas, la cuadrícula CSS le ofrece lo mejor de ambos mundos: un enfoque 2D que utiliza filas y columnas.

Contenedores y artículos de rejilla

Puede aplicar propiedades de cuadrícula CSS a dos tipos principales de elementos: padres e hijos. Cuando configura la propiedad de visualización en "cuadrícula" para un elemento principal, transforma ese elemento en un contenedor de cuadrícula. Cualquier elemento secundario dentro de este contenedor de cuadrícula se convierte en un elemento de cuadrícula y hereda las propiedades de cuadrícula aplicadas.

Así es como se representa:

Un elemento de cuadrícula también puede convertirse en un contenedor de cuadrícula. Ahora puede referirse al diseño como una cuadrícula anidada: una cuadrícula dentro de otra cuadrícula. El contenedor de cuadrícula principal ahora se denomina cuadrícula exterior, mientras que el contenedor de elemento convertido en cuadrícula se convierte en una cuadrícula interna.

Cada una de estas cuadrículas funciona independientemente de la otra, lo que significa que las propiedades establecidas para una cuadrícula interior no afectan el diseño de la cuadrícula exterior y viceversa.

Así es como se ve:

Dominar la relación entre los contenedores de la cuadrícula y los artículos es esencial para construir diseños bidimensionales efectivamente.

Tenga en cuenta que existen propiedades de cuadrícula para contenedores de cuadrícula, mientras que otras son para elementos de cuadrícula.

Líneas de cuadrícula y pistas

Antes de comenzar a utilizar la cuadrícula CSS, hay dos términos clave con los que debes estar familiarizado:

1. Líneas de cuadrícula: Las líneas de cuadrícula se refieren a las líneas horizontales y verticales que forman la cuadrícula en un diseño de cuadrícula CSS. Especifican los puntos inicial y final de filas y columnas, lo que ayuda a organizar dónde van los elementos en la cuadrícula. Estas líneas son como los bordes de cajas; Tienen números que te ayudan a referenciar los elementos al momento de posicionarlos. Aquí la línea discontinua roja los representa:
2. Pistas de cuadrícula: Son los espacios entre las líneas de la cuadrícula que definen filas y columnas. Son como los componentes básicos del diseño de la cuadrícula. En la imagen de arriba, el área coloreada dentro de cada elemento representa la pista de la cuadrícula.

Piense en las líneas y pistas de la cuadrícula como los componentes básicos de un diseño de cuadrícula, como las líneas en una hoja de papel cuadriculado. Cuando una línea de cuadrícula horizontal se cruza con una línea de cuadrícula vertical, se forma una celda en forma de caja. Estas celdas actúan como contenedores donde puedes colocar los elementos de tu cuadrícula.

Propiedades del contenedor de cuadrícula CSS

Estas son propiedades que puede aplicar al contenedor de cuadrícula para organizar el diseño y ayudar a colocar elementos dentro de él. Como se mencionó anteriormente, uno de ellos es la propiedad de visualización establecida en cuadrícula. Aquí hay más:

Plantilla de cuadrícula

Esta propiedad define el tamaño de filas y columnas. Puede dimensionar estas propiedades utilizando píxeles, porcentajes o la unidad fraccionaria (fr). Además, puede utilizar palabras clave como auto, mínimo máximo(), y repetir() para mejorar la flexibilidad.

• filas de plantilla de cuadrícula: establece las alturas de las filas.
• columnas-plantilla-cuadrícula: Define el ancho de las columnas.

Aquí hay unos ejemplos:

Usando píxeles:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Usando porcentajes:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

usando fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Uso de palabras clave auto y minmax():

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Usando repetir() para un tamaño consistente:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Áreas de colocación automática y plantilla de cuadrícula

Colocación automática: La ubicación automática es como dejar que la cuadrícula decida dónde colocar los elementos. Si no especifica posiciones exactas, la cuadrícula colocará automáticamente los elementos en el orden en que aparecen en el marcado. Esto es útil cuando tiene muchos elementos y desea que llenen la cuadrícula de manera uniforme.

Áreas de plantilla de cuadrícula: Piense en las áreas de plantilla de cuadrícula como si crearan un diseño utilizando zonas con nombre. Es como nombrar las habitaciones en un plano. Puede consultar los nombres de estas áreas al colocar elementos de la cuadrícula. Por ejemplo:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Este diseño es como una cuadrícula con tres columnas y cuatro filas. Hay dos filas para el área de contenido principal. Las áreas etiquetadas incluyen "encabezado", "barra lateral", "contenido" y "pie de página". En las siguientes secciones, aprenderá cómo utilizar estas etiquetas de área en las propiedades de cada elemento de la cuadrícula.

Alineación en CSS Grid

Puede utilizar propiedades de alineación para controlar la posición de los elementos de la cuadrícula dentro de sus celdas de la cuadrícula. Las propiedades son:

• justificar elementos: controla la alineación horizontal de los elementos dentro de su celda de la cuadrícula.
  • Valores: inicio, fin, centro y estiramiento.
• alinear elementos: controla la alineación vertical de los elementos dentro de su celda de la cuadrícula.
  • Valores: inicio, fin, centro y estiramiento.
• justificar-contenido: Alinea toda la cuadrícula dentro del contenedor a lo largo del eje horizontal.
  • Valores: inicio, fin, centro, estiramiento, espacio entre, espacio alrededor y espacio uniforme.
• alinear contenido: Alinea toda la cuadrícula dentro del contenedor a lo largo del eje vertical.
  • Valores: inicio, fin, centro, estiramiento, espacio entre, espacio alrededor y espacio uniforme.

He aquí un ejemplo:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

En este ejemplo, los elementos se centrarán tanto horizontal como verticalmente dentro de sus celdas. El espacio se distribuirá uniformemente entre las columnas de toda la cuadrícula y la cuadrícula se centrará verticalmente en el contenedor.

Brecha de red

El espacio de la cuadrícula se refiere al espacio entre filas y columnas en un diseño de cuadrícula. Ayuda a crear una separación visual y agrega algo de espacio entre los elementos de la cuadrícula.

El brecha de red La propiedad le permite establecer el espacio entre filas y columnas. Puede utilizar varias unidades para definirlo, como píxeles (px), porcentajes (%), unidades em (em) y más.

.grid-container {
grid-gap: 20px;
}

En este ejemplo, el contenedor de la cuadrícula tiene dos columnas con un espacio de 20 píxeles entre ellas. Este espacio separa visualmente las columnas y mejora el diseño.

Propiedades del elemento de cuadrícula CSS

A continuación se muestran algunas propiedades clave que controlan el comportamiento de elementos de cuadrícula individuales dentro de un diseño de cuadrícula CSS, junto con ejemplos:

inicio de fila de cuadrícula y final de fila de cuadrícula:

• Define las líneas de fila inicial y final de un elemento.
• Los valores pueden ser números de línea, "span n" o "auto".

.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Este código coloca Elemento de cuadrícula 1 desde la línea de la segunda fila hasta la línea de la cuarta fila.

inicio-columna-cuadrícula y final-columna-cuadrícula:

• Define las líneas de columna inicial y final de un elemento.
• Los valores pueden ser números de línea, "span n" o "auto".

.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Este código coloca Elemento de cuadrícula 2 desde la primera línea de la columna hasta la tercera línea de la columna.

área de cuadrícula:

• Especifica el tamaño y la posición de un elemento de la cuadrícula dentro de la cuadrícula haciendo referencia a las líneas de la cuadrícula nombradas en áreas de plantilla de cuadrícula.
• Como se mencionó anteriormente, los nombres de áreas predefinidas ya están en uso con el áreas de plantilla de cuadrícula propiedad. A continuación se muestra un ejemplo de cómo usarlo junto con área de cuadrícula.

.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Aquí está el resultado:

justificarse:

• Alinea elementos individuales horizontalmente dentro de su celda.
• Los valores pueden ser inicio, fin, centro y extensión.

.grid-item-5 {
justify-self: center;
}

Este código centra horizontalmente el Elemento de cuadrícula 5 dentro de su celda.

alinearse:

• Alinee elementos individuales verticalmente dentro de su celda.
• Los valores pueden ser inicio, fin, centro y extensión.

.grid-item-1 {
align-self: end;
}

Este código se alinea Elemento de cuadrícula 1 hasta el fondo de su celda.

Siéntase libre de combinar y personalizar estas propiedades para crear el diseño y la apariencia que desea para cada elemento de la cuadrícula en su cuadrícula CSS.

Crear diseños responsivos usando cuadrículas CSS

Usando cuadrículas CSS para creando diseños responsivos Es importante garantizar que su página web se adapte perfectamente a varios tamaños de pantalla y dispositivos. Puedes aplicar estos métodos:

• Preguntas de los medios: Puedes utilizar consultas de medios. para aplicar diferentes diseños de cuadrícula según el tamaño de la pantalla. Por ejemplo, es posible que necesites reorganizar los elementos de la cuadrícula o ajustar el ancho de las columnas para pantallas más pequeñas.
• Unidades flexibles: Utilice unidades relativas como porcentajes y fr para permitir que los elementos y columnas de la cuadrícula se ajusten proporcionalmente al espacio disponible.
• mínimo máximo(): Utilizar el mínimo máximo() función para especificar un rango de tamaños para columnas o filas de la cuadrícula. Garantiza que los elementos no aparezcan ni demasiado pequeños ni demasiado grandes en diferentes pantallas.

Recuerde ajustar las columnas y otros elementos como los espacios entre los elementos de la cuadrícula, los tamaños de fuente y los márgenes. Garantiza un diseño coherente y bien diseñado que funciona bien en varios dispositivos.

Explore las posibilidades del diseño de cuadrícula CSS

Adoptar la flexibilidad y el poder de la cuadrícula CSS le permitirá crear diseños que no sólo se ven geniales sino que también se adaptan perfectamente a las demandas del diseño web moderno. Entonces, sumérgete en el mundo de las grillas, explora las posibilidades y mejora tus habilidades de desarrollo web.

A medida que profundiza en los sistemas de diseño, es posible que desee comparar otros métodos de diseño con cuadrículas CSS. Puede hacerlo con el módulo CSS Flexbox. Esto le ayudará a aprender a decidir cuándo trabajar en un proyecto.