Si llevas tiempo en el ecosistema de desarrollo de Apple, seguramente recuerdas los días de UIKit y el temido UICollectionView. Configurar un UICollectionViewFlowLayout, gestionar los delegados, los data sources y calcular tamaños de celdas manualmente era una tarea que consumía horas. Con la llegada de la programación Swift declarativa, todo eso ha cambiado.
Hoy, como iOS Developer, tienes a tu disposición una de las herramientas más potentes y flexibles de SwiftUI: los Grids (Cuadrículas).
En este tutorial, desglosaremos desde cero qué es un Grid en SwiftUI, cómo funciona su arquitectura interna y cómo puedes implementarlo para crear interfaces adaptables y complejas en iOS, macOS y watchOS utilizando Xcode.
¿Qué es un Grid en SwiftUI?
En términos simples, un Grid es un contenedor que organiza las vistas en un diseño bidimensional: filas y columnas. A diferencia de un VStack o HStack que alinean elementos en una sola línea, un Grid permite la distribución de contenido en múltiples ejes, aprovechando al máximo el espacio de la pantalla.
Sin embargo, en SwiftUI, no existe un único tipo de Grid. Dependiendo de tus necesidades de rendimiento y diseño, elegirás entre dos familias principales:
- Lazy Grids (
LazyVGridyLazyHGrid): Introducidos en iOS 14. Son “perezosos”. Solo renderizan las vistas que están visibles en la pantalla. Son ideales para colecciones grandes de datos (galerías de fotos, feeds de productos). - Grid (Layout estático): Introducido en iOS 16. Carga todas las vistas a la vez. Funciona de manera similar a una tabla HTML o una hoja de cálculo. Es ideal para diseños de estructura fija, como un calendario, una calculadora o un formulario de configuración.
Entender esta diferencia es vital para la optimización de memoria en tu aplicación.
El Corazón del Layout: GridItem
Antes de escribir una sola línea de código, debemos entender el cerebro detrás de la operación: GridItem. Un GridItem define cómo se comporta una columna (en un LazyVGrid) o una fila (en un LazyHGrid). Existen tres tipos de tamaños:
- .fixed(CGFloat): Es el más rígido. El tamaño será inmutable sin importar el dispositivo.
- .flexible(minimum: CGFloat, maximum: CGFloat): Comportamiento por defecto. Intenta llenar todo el espacio disponible dividiéndolo equitativamente.
- .adaptive(minimum: CGFloat, maximum: CGFloat): La joya para el diseño responsivo. SwiftUI calculará automáticamente cuántas columnas caben en la pantalla basándose en el tamaño mínimo que definas.
Tutorial Práctico: Creando tu Primera Galería con LazyVGrid
Vamos a abrir Xcode y ensuciarnos las manos. Crearemos una galería de imágenes que se adapte a cualquier dispositivo.
Paso 1: Preparación del Modelo de Datos
Como buen iOS Developer, siempre empezamos por los datos.
import SwiftUI
struct GridTutorialView: View {
// Generamos datos de prueba: 50 elementos
let data = (1...50).map { "Item \($0)" }
var body: some View {
// La implementación irá aquí
}
}
Paso 2: Definiendo las Columnas
Aquí es donde configuramos el layout. Vamos a empezar con un diseño de 3 columnas fijas para entender la base.
// Definición de 3 columnas flexibles
let columns = [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
]
Paso 3: Implementando la Vista
El LazyVGrid no tiene scroll propio. Por lo tanto, casi siempre debe estar envuelto en un ScrollView.
var body: some View {
NavigationView {
ScrollView {
LazyVGrid(columns: columns, spacing: 20) {
ForEach(data, id: \.self) { item in
VStack {
Image(systemName: "photo")
.resizable()
.scaledToFit()
.frame(height: 50)
.foregroundColor(.white)
Text(item)
.font(.caption)
.foregroundColor(.white)
}
.frame(height: 100)
.frame(maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(10)
}
}
.padding() // Margen externo para que no toque los bordes
}
.navigationTitle("Galería SwiftUI")
}
}
Al ejecutar esto en el simulador de Xcode, verás tres columnas perfectas que se estiran para ocupar el ancho.
Llevándolo al Siguiente Nivel: Diseño Adaptativo (Responsive)
El código anterior tiene un problema: en un iPad, tres columnas se verán gigantescas. Aquí es donde entra el poder del .adaptive. Modifica la definición de tus columnas:
// Solo necesitamos definir UN GridItem, SwiftUI lo repetirá automáticamente
let columns = [
GridItem(.adaptive(minimum: 100), spacing: 15)
]
¿Qué acabamos de hacer? Le hemos dicho a SwiftUI: “Coloca tantas columnas como puedas, siempre y cuando cada celda tenga al menos 100 puntos de ancho”. Esto convierte tu aplicación en una experiencia nativa de primer nivel tanto para iOS como para macOS.
LazyHGrid: Scroll Horizontal
A veces, el diseño vertical no es lo que buscamos (piensa en la interfaz de Netflix). Para esto, usamos LazyHGrid. La lógica se invierte: definimos filas (rows) en lugar de columnas.
struct HorizontalGridExample: View {
let rows = [
GridItem(.fixed(150)), // Fila 1: Altura fija
GridItem(.fixed(150)) // Fila 2: Altura fija
]
var body: some View {
ScrollView(.horizontal) {
LazyHGrid(rows: rows, spacing: 20) {
ForEach(0..<20) { index in
RoundedRectangle(cornerRadius: 15)
.fill(Color.orange)
.frame(width: 200) // Ancho fijo para cada tarjeta
.overlay(Text("Tarjeta \(index)"))
}
}
.padding()
}
}
}
Secciones y “Sticky Headers”
Una característica muy solicitada en aplicaciones profesionales es tener encabezados que se queden “pegados” arriba mientras haces scroll. El Grid en SwiftUI hace esto increíblemente fácil con el parámetro pinnedViews.
LazyVGrid(
columns: columns,
spacing: 20,
pinnedViews: [.sectionHeaders] // <--- La magia ocurre aquí
) {
Section(header: HeaderView(title: "Favoritos")) {
ForEach(favorites) { item in
ItemView(item: item)
}
}
Section(header: HeaderView(title: "Todos los elementos")) {
ForEach(allData) { item in
ItemView(item: item)
}
}
}
Grid API (iOS 16+): El Poder del Layout Estático
Imagina que estás diseñando un formulario de perfil en tu app. No tienes 500 elementos, tienes 4 o 5 campos fijos. Para esto, Apple introdujo Grid y GridRow en Xcode 14.
Grid(alignment: .leading, horizontalSpacing: 20, verticalSpacing: 10) {
GridRow {
Text("Nombre").bold()
TextField("Tu nombre", text: $name)
}
Divider()
GridRow {
Text("Email").bold()
TextField("hola@ejemplo.com", text: $email)
}
GridRow {
Text("Notificaciones").bold()
Toggle("", isOn: $notifications)
}
}
También puedes usar gridCellColumns para que una celda ocupe varias columnas, similar al “colspan” de HTML:
GridRow {
Text("Guardar Cambios")
.frame(maxWidth: .infinity)
.background(Color.blue)
.gridCellColumns(2) // Ocupa las 2 columnas del grid
}
Consideraciones Multiplataforma
Como iOS Developer moderno, tu código debe ser versátil:
- macOS: Usa
.adaptivesiempre que sea posible para soportar el redimensionamiento de ventana. - watchOS: Un
LazyVGridconGridItem(.adaptive(minimum: 50))creará automáticamente un diseño de panal perfecto para el reloj.
Conclusión
El Grid en SwiftUI ha madurado hasta convertirse en una herramienta indispensable. Ya no es necesario luchar con matemáticas complejas de layout. Resumen rápido:
- ¿Muchos datos (scroll infinito)? Usa LazyVGrid.
- ¿Diseño responsivo? Usa GridItem(.adaptive).
- ¿Estructura fija (formularios)? Usa Grid (iOS 16+).
Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 
. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram
