El blog de dinahosting
  • Inicio
    • Noticias
  • Productos
    • Novedades
    • Dominios
    • Hosting
      • WordPress
    • Servidores
    • Resellers
    • Afiliados
  • Seguridad
  • Crear tienda online
    • Prestashop
    • WooCommerce
  • Digitalización pymes
  • Marketing
  • Somos DH
    • Eventos
    • Equipo DH
    • Clientes

El blog de dinahosting

  • Inicio
    • Noticias
  • Productos
    • Novedades
    • Dominios
    • Hosting
      • WordPress
    • Servidores
    • Resellers
    • Afiliados
  • Seguridad
  • Crear tienda online
    • Prestashop
    • WooCommerce
  • Digitalización pymes
  • Marketing
  • Somos DH
    • Eventos
    • Equipo DH
    • Clientes
#HalloweenDH

Suscríbete a nuestra newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además con tu alta te regalamos 2 guías: una de iniciación a WordPress y otra con recursos de marketing.

Newsletter
CSS Grid

CSS Grid: ventajas y primeros pasos

escrito por Marta Mariño agosto 22, 2019

¿Te dedicas al diseño web? CSS Grid es el nuevo estándar que te permitirá crear páginas de una manera mucho más flexible. Te contamos todas sus ventajas y cómo empezar a utilizarlo.

Índice de contenidos

  • 1 ¿Qué es CSS Grid?
  • 2 Ventajas de CSS Grid:
  • 3 Primeros pasos
    • 3.1 1. Crea un bloque contenedor
    • 3.2 2. Activa CSS Grid
    • 3.3 3. Define tu rejilla
    • 3.4 4. Colocar los elementos en la rejilla

¿Qué es CSS Grid?

CSS Grid es un sistema de maquetación web que divide la página en una cuadrícula o rejilla (grid) a partir de la cual se pueden posicionar los diferentes elementos de manera más sencilla, versátil y coherente.

Su practicidad y sus múltiples ventajas lo han convertido en un estándar. Es decir, casi cualquier navegador soporta e interpreta este tipo de código.

La irrupción de CSS Grid, junto con Flexbox, supuso una revolución en el mundo de la programación web, ya que permitía realizar con mucho menos código elementos y estructuras que resultaban muy complejas o directamente imposibles.

Ventajas de CSS Grid:

  • Mucha más flexibilidad: te permite controlar los elementos en las 2 dimensiones y con total libertad.
  • Menos código y menos bugs: se reduce considerablemente el código empleado, lo que conlleva revisiones más sencillas y menor probabilidad de bugs.
  • Optimización de recursos: al ser código más simple y consistente se economiza tanto en tiempo como en recursos necesarios para mostrar la página.
  • Responsive más sencillo: permite crear elementos dinámicos que se adaptan a diferentes tamaños o resoluciones sin complicaciones.

Primeros pasos

Te resumimos el funcionamiento de CSS Grid en 4 sencillos pasos.

1. Crea un bloque contenedor

Para alojar los elementos que quieras colocar es necesario crear un bloque contenedor, como por ejemplo:

<section class="contenedor">
     <div class="item-1">1</div>
     <div class="item-2">2</div>  
     <div class="item-3">3</div>  
     <div class="item-4">4</div> 
     <div class="item-5">5</div> 
     <div class="item-6">6</div>  
</section>

2. Activa CSS Grid

Para que Grid comience a funcionar debes activarlo mediante la propiedad display: grid.

.contenedor {
   display: grid;
 }

3. Define tu rejilla

Una vez esté activo, toca definir la rejilla mediante las siguientes propiedades: grid-template-rows, grid-template-columns y/o grid-template-areas.

Por ejemplo, si queremos hacer este esquema:

Utilizaremos el siguiente código:

.contenedor{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 50px auto;
 }

Puedes definir tus elementos utilizando diferentes unidades fijas como los píxeles, o utilizar la unidad propia del sistema Grid: los fr.

La unidad fr indica la fracción del espacio restante que ocupará un elemento.

Por ejemplo, si tienes 3 columnas y le asignas un valor 1fr a cada una, esto repartirá el espacio a partes iguales entre las 3. Si en cambio, le das el valor 2fr a una de ellas, esa ocupará el doble de espacio que las otras.

El espaciado entre items puedes marcarlo con grid-row-gap y grid-column-gap, o bien definirlo previamente en tu grid como si fueran una columna/fila más.

4. Colocar los elementos en la rejilla

Si no marcas la posición de los elementos estos se colocarán por defecto de izquierda a derecha y de arriba abajo.

Si quieres personalizar la ubicación de los ítems puedes indicarle donde quieres que vaya cada uno tal que así:

.item-1 {
   grid-row-start: 1; 
   grid-row-end: 2; 
   grid-column-start: 1;
   grid-column-end:2;
 }

O de forma acortada:

.item-1 {
   grid-row: 1; 
   grid-column: 1;
 }

Otro modo acortado sería utilizando grid-row: X / Y o grid-column: X / Y. Siendo X el número de fila o columna inicial e Y el número de fila o columna final.

.item-1 {
   grid-row: 2;
   grid-column: 2 / 4;
 }

De esta forma puedes repartir los elementos a tu gusto, incluso variando el espacio que ocupa cada uno para hacerlo más dinámico.

Esto es solo un avance de lo que puedes realizar con este sistema. Si quieres saber más, puedes pasarte por aquí y echarle un ojo a la guía.

Con CSS Grid ahorrarás tiempo picando código y tus diseños web serán más flexibles y funcionales. Si todavía no tienes hosting para montar tu página, pásate por nuestra web y obtén la mejor base para crear tus diseños. ¡A qué esperas para montar tu rejilla!

0 comentario
1
Facebook Twitter Google + Pinterest

Deja un comentario Cancelar respuesta

Puedes revocar tu consentimiento, así como otros derechos, tal y como se describe en la información adicional

Información básica sobre protección de datos

Responsable
Dinahosting S.L.  [+ info]
Finalidad y legitimación
Tratamos los datos que nos proporcionas con la finalidad de gestionar tu comentario, incluida su publicación en nuestro blog. Al enviarnos tu comentario o sugerencia nos das tu consentimiento explícito para que tratemos tus datos con esta finalidad  [+ info]
Destinatarios
Publicamos los comentarios que nos envías en el blog. Enviar un comentario en nuestro blog implica la publicación en el blog del ‘nombre’ y, en su caso, el ‘avatar’ que utilices al dejar el comentario  [+ info]
Derechos
Puedes revocar tu consentimiento, así como otros derechos, tal y como se describe en la información adicional  [+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad

En dinahosting

Promotion Image

Dominios

Promotion Image

Hosting SSD NVMe

Promotion Image

VPS

Suscríbete a nuestra newsletter

Promotion Image Newsletter

Newsletter

Recibe quincenalmente consejos muy útiles para tu web y ecommerce. Además con tu alta te regalamos 2 guías: una de iniciación a WordPress y otra con recursos de marketing.

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable
Dinahosting SL. [+ info]
Finalidad y legitimación
Trataremos tus datos con la finalidad de enviarte el boletín electrónico informándote sobre los contenidos del blog. Estamos legitimados para tratarlos porque te has suscrito a nuestra newsletter.[+ info]
Personas destinatarias
No comunicaremos tus datos a terceros, salvo obligación legal.[+info]
Derechos
Puedes revocar tu consentimiento, modificando tu perfil tal y como se describe en el correo electrónico de suscripción.[+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad.

Conviértete en afiliado

Gana dinero recomendando dinahosting a todo el mundo.
Hazte afiliado

¡Síguenos!

Facebook Twitter Instagram Linkedin Youtube
Facebook Twitter Instagram Linkedin Youtube

LLÁMANOS GRATIS

900 854 000


ESCRÍBENOS

soporte@dinahosting.com

En dinahosting

  • Hosting
  • Dominios

Área privada

  • Panel de administración
  • Webmail
  • Feedback
  • Protección de datos
  • Ayuda
  • 900 854 000
  • soporte@dinahosting.com

@2020 - Dinahosting

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable
Dinahosting SL  [+ info]
Finalidad y legitimación
Trataremos tus datos con la finalidad de enviarte el boletín electrónico informándote sobre los contenidos del blog. Estamos legitimados para tratarlos porque te has suscrito a nuestra newsletter  [+ info]
Personas destinatarias
No comunicaremos tus datos a terceros, salvo obligación legal  [+ info]
Derechos
Puedes revocar tu consentimiento, modificando tu perfil tal y como se describe en el correo electrónico de suscripción  [+ info]
Información adicional
Para más información, consulta nuestra Política de Privacidad