Generador de rejillas
Crea layouts CSS Grid complejos con vista previa en vivo y exportacion de codigo
Arrastra las tarjetas en la vista previa para ajustarlas a las celdas del grid.
Pila del grid
Elementos del grid
Manten los puntos y arrastra los elementos del grid hacia arriba o abajo para reordenarlos.
<div class="grid-container">
<div class="grid-item-1">Item 1</div>
<div class="grid-item-2">Item 2</div>
</div>.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 16px;
row-gap: 16px;
grid-auto-flow: row;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;
}
.grid-item-1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: #667eea;
}
.grid-item-2 {
grid-column: 2 / 4;
grid-row: 1 / 3;
background-color: #764ba2;
}Desbloquea funciones Pro para tu equipo
Obtén acceso API, soporte prioritario y opciones avanzadas de exportacion. Perfecto para agencias y equipos de producto.
CSS Grid Generator Features
- Visual Builder — Create complex grid layouts using an intuitive visual interface. See changes in real-time as you adjust columns and rows.
- Flexible Units — Use fr, px, %, auto, min-content, max-content and other units. Combine them to create responsive layouts.
- Grid Template Areas — Define named grid areas for semantic content placement. Create complex layouts with ease and readability.
- Gap & Spacing — Configure spacing between columns and rows separately or together. Support for new gap properties instead of deprecated grid-gap.
- Auto-placement — Automatic element placement in the grid with flow direction control. Configure packing density for optimal space usage.
- Ready Templates — Collection of popular layouts: Holy Grail, cards, galleries, dashboards. Use as a starting point for your project.
How to Use Grid Generator
- Define the number of columns and rows for your grid
- Configure the size of each column and row using appropriate units
- Add gaps between elements using gap properties
- Place elements in the grid by specifying their positions
- Use named areas for semantic placement
- Copy the generated CSS and HTML code for use in your project
Why Use CSS Grid
CSS Grid is the most powerful layout system in CSS, allowing you to create two-dimensional layouts with full control over rows and columns. Unlike Flexbox, Grid is perfect for creating complex page layouts, dashboards, and responsive interfaces. Grid automatically manages alignment, supports element overlapping, and greatly simplifies creating responsive designs without media queries.