CSS Grid Layout

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

CSS Grid sigue siendo una tecnología experimental - en la mayoría de los navegadores es necesario activar un flag para habilitarlo y poder hacer uso de esta API. Asegúrese de consultar la tabla de compatibilidad para cada propiedad y función para obtener más información.

CSS Grid layout contiente funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. Destaca por dividir una página en regiones principales, o definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

Al igual que las tablas, el grid layout permite al autor alinear elementos en columnas y filas. Sin embargo, a diferencia de las tablas, el diseño de la cuadrícula no tiene estructura de contenido, lo que permite una gran variedad de diseños no posibles en las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse de manera que se solapen y se superpongan, similar a los elementos posicionados en CSS.

Ejemplo sencillo

Contenido HTML

<div class="wrapper">
  <div class="box a">a</div>
  <div class="box b">b</div>
  <div class="box c">c</div>
  <div class="box d">d</div>
  <div class="box e">e</div>
  <div class="box f">f</div>
</div>

Contenido CSS

.wrapper { 
  display: grid; 
  grid-template-columns: 100px 100px 100px; 
  grid-gap: 10px; 
  background-color: #fff; 
  color: #444; 
} 

.box { 
  background-color: #444; 
  color: #fff; 
  border-radius: 5px; 
  padding: 20px; 
  font-size: 150%; 
}

Referencia

Propiedades CSS

Función CSS

Especificación

Especificación Estatus Comentario
CSS Grid Layout Candidate Recommendation Initial definition.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: StripTM
 Última actualización por: StripTM,