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.
CSS Grid FAQ
What is the difference between Grid and Flexbox?
Grid is designed for two-dimensional layouts (rows and columns), while Flexbox is for one-dimensional (row only or column only). Grid is better for overall page structure, Flexbox for components.
Do older browsers support CSS Grid?
Modern versions of all browsers fully support CSS Grid. IE11 supports the old specification with -ms- prefix but with limitations. For critical projects, use Flexbox as a fallback.
What is the fr unit in Grid?
Fr (fraction) represents a fraction of the free space in the grid container. 1fr 1fr 1fr will create three equal columns that take up all available space.
How to make Grid responsive?
Use minmax(), auto-fit, and auto-fill functions for automatic adaptation. You can also use media queries to change grid-template-columns on different screens.