• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

Montando Sites

Recursos y Tutoriales de Desarrollo Web con WordPress y Genesis Framework

  • Empieza aquí
  • Tutoriales

CSS Grid Básico: Retícula con Filas y Columnas.

28 septiembre, 2019 por Gerber Cucurell

CSS Grid con filas y columnas
CSS Grid con filas y columnas

Montar una retícula con CSS Grid nos da un gran potencial para maquetar estructuras complejas que hace un tiempo suponían cierta complejidad, cómo por ejemplo una galería, un portafolio e incluso la estructura general de un sitio web. En este artículo vamos a ver su funcionamiento básico. Lo único que tienes que tener en cuenta es qué es un sistema bastante moderno, por lo que algunos navegadores antiguos no lo soportan. A continuación tienes una tabla donde puedes ver las compatibilidades.

Navegadores que soportan CSS Grid:

Google Chrome 57.0
Firefox 52.0
Safari 10
Opera 44
Edge 16.0


CSS Grid, retícula básica

El HTML para montar la retícula CSS Grid consta de un div contenedor que alberga celdas en su interior cómo puedes ver de forma simple en el siguiente ejemplo:

<div class="grid-container">
  <div>Columna 1</div>
  <div>Columna 2</div>
  <div>Columna 3</div>
  <div>Columna 4</div>
  <div>Columna 5</div>
  <div>Columna 6</div>
</div>
.grid-container{
     display: grid;
     grid-gap: 5px;
     grid-template-columns: 1fr 1fr 1fr;
}

El contenedor tiene tres propiedades básicas:

  • Display Grid: necesario para CSS Grid
  • Grid Gap: espacio entre columnas opcional
  • Grid Template Columns: determina el número de columnas, en este caso hay 3 y su anchura se reparte de forma automática a partes iguales.

Y el resultado sería el siguiente:

Columna 1
Columna 2
Columna 3
Columna 4
Columna 5
Columna 6

CSS Grid, columnas desiguales

En el ejemplo anterior, la propiedad grid-template-columns se ha definido en auto. Vamos a crear ahora columnas desiguales; la primera ocupará el 30% y la segunda ocupará el resto del espacio.

<div class="grid-container">
  <div>Columna 1</div>
  <div>Columna 2</div>
  <div>Columna 3</div>
  <div>Columna 4</div>
  <div>Columna 5</div>
  <div>Columna 6</div>
</div>
.grid-container{
     display: grid;
     grid-gap: 5px;
     grid-template-columns: auto 30%;
}
Columna 1
Columna 2
Columna 3
Columna 4
Columna 5
Columna 6

CSS Grid, cuadrícula destacada

Vamos ahora a dar un paso mas allá, que es destacar una cuadrícula. En este caso tenemos que añadir una clase a un elemento «hijo» del grid container para poder aplicar estilos individualizados.

<div class="grid-container">
  <div class="grid-item-destacado">Columna 1</div>
  <div>Columna 2</div>
  <div>Columna 3</div>
  <div>Columna 4</div>
</div>
.grid-container{
     display: grid;
     grid-gap: 5px;
     grid-template-columns: 1fr 1fr 1fr;
}

.grid-item-destacado{
     grid-column-start: 1;
     grid-column-end: 4;
}

Como puedes ver, aquí estamos trabajando con dos nuevas propiedades:

  • Grid column start: define dónde empieza el grid-item-1
  • Grid column end: define dónde acaba el grid-item-1

El resultado sería el siguiente:

Columna 1
Columna 2
Columna 3
Columna 4

A continuación, con un HTML parecido al ejemplo anterior pero cambiando el grid-column-end de la cuadricula destacada a 3.

.grid-item-destacado{
     grid-column-start: 1;
     grid-column-end: 3;
}
Columna 1
Columna 2
Columna 3
Columna 4
Columna 5

Ya hemos visto lo básico de CSS Grid y cómo puedes comprobar permite montar muchas estructuras de forma sencilla y sin complicaciones. Pero el potencial de este sistema es mucho más grande. Si quieres profundizar, te recomiendo que visites la página web w3schools, dónde podrás ver todo lo que se puede hacer con CSS Grid.


Artículos destacados
Conseguir un 100 en Google Page Speed Insights

Archivado en: CSS, Retículas y Columnas

Acerca de Gerber Cucurell

Desarrollador Web especializado en WordPress + Genesis Framework, Director de Arte y Técnico Superior en Multimedia Interactiva. Más info…

Barra lateral principal

Categorías

  • CSS
    • Iconos
    • Menus
    • Retículas y Columnas
  • Genesis Framework
    • Custom Posts
    • Footer
    • Header
    • Imágenes Destacadas
    • Page Template
    • Widgets
  • Javascript
  • SEO
    • 404
    • Imágenes
    • Optimización Web
  • WordPress
    • Admin
    • Campos personalizados
    • Clases CSS
    • Google Fonts
    • Gutenberg
    • PHP
    • Plugins
    • Search
    • Shortcodes
    • Traducciones
    • WPML
  • Recursos rápidos
  • Info
  • Aviso Legal
  • Contacto
  • Política de cookies (UE)