Developer

Generador de diseño de cuadrícula CSS

Genere visualmente diseños de cuadrícula CSS, establezca filas, columnas y espacios, y copie el código CSS/HTML. Se ejecuta completamente en su navegador: no se envían datos a ningún servidor, no se requiere cuenta y es completamente gratis.

Grid Settings

1
2
3
4
5
6
7
8
9
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

La guía completa de CSS Grid: diseños bidimensionales modernos

CSS Grid Layout es el sistema de diseño más potente en CSS. Convierte cualquier elemento HTML en un contenedor de cuadrícula, lo que le permite colocar elementos secundarios en filas y columnas con un control preciso. Nuestro generador de cuadrículas CSS gratuito le permite crear diseños de cuadrículas visualmente y copiar instantáneamente CSS y HTML listos para producción, sin necesidad de codificación manual.

Propiedades del núcleo de cuadrícula CSS

  • display: grid: activa el diseño de cuadrícula en un contenedor
  • grid-template-columns: define los tamaños de las columnas (p. ej., repeat(3, 1fr), 200px 1fr 200px)
  • grid-template-rows: define el tamaño de las filas
  • gap: establece el espacio entre las celdas de la cuadrícula (reemplaza el antiguo grid-gap)
  • columna-cuadrícula/fila-cuadrícula: permite que un elemento secundario abarque varias columnas o filas
  • place-items: abreviatura de align-items + justify-items

Explicación de la unidad fr

La unidad fr (fracción) es exclusiva de CSS Grid. Representa una fracción del espacio disponible en el contenedor de la cuadrícula. repeat(3, 1fr) crea tres columnas y cada una ocupa un tercio del ancho del contenedor. 2fr 1fr crea dos columnas donde la primera tiene el doble de ancho que la segunda. La unidad fr se distribuye después de calcular las columnas de tamaño fijo y de tamaño automático.

Colocación automática de cuadrícula

De forma predeterminada, los elementos de la cuadrícula se colocan automáticamente en la siguiente celda disponible, de izquierda a derecha y de arriba a abajo. La propiedad grid-auto-flow controla esto: row (predeterminado) llena las filas primero, column llena las columnas primero y dense intenta llenar los espacios con elementos más pequeños.

Soporte del navegador

CSS Grid es compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge) desde 2017, con una cobertura global superior al 97%. Para Internet Explorer 11 heredado, existe una implementación parcial que utiliza los prefijos -ms-, pero los proyectos modernos ya no necesitan preocuparse por esto.

Después de generar su cuadrícula, minimice su CSS con nuestro CSS Minifier, o genere fondos degradados con nuestro generador de degradado CSS.

Compartir:
Minificador y formateador de CSS
Minimizar y formatear código CSS
Generador de gradiente CSS
Generar gradientes CSS