hand Inicio
hand JSBloqs
hand GutenBloqs
Qué?
nochedía

DESARROLLO WEB con
REACT y WORDPRESS

Apúntate a la newsletter (escribo algo de tanto en cuanto)

Distribuciones grid, ejemplos

100 palabras
1 minutos
February 26, 2020
blogcss

Snippets (o ejemplos prácticos) de css grid

  1. Grid

Grid

Para organizar contenido, las 2 opciones más omnipresentes que nos proporciona css es el grid y el flex

Un argumento habitual para preferir flex es que hay más soporte en los navegadores antiguos, pero esto ya tiene poca sustancia, si utilizas grid tienes una cobertura de más del 92% canIUse), mientras que con el flex tienes más del 95%

Son diferencias residuales

El funcionamiento de grid es muy sencillo

display: grid;
grid-gap: 10px; /* especificas el espacio entre celdas */
grid-template-columns: 200px 500px; /* especificas el ancho de las columnas */

A partir de aquí se puede complicar, pero entendido lo básico la mejor manera de aprender es utilizándola en código real

Una explicación más en detalle la tienes en la entrada guía para grid

Y una selección de ejemplos los tienes en estos ejemplos de distribuciones

Qué tal la entrada?

👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏
Enviar Feedback ✍️
El texto está en blanco!
Gracias por enviarme tu opinión
👍

Si quieres explorar más cursos y más entradas en el blog, los tienes todos en la página principal, y si el contenido te ha ayudado si lo compartes me ayudas a dar difusión 👍

Privacidad
by kuworking.com
[ 2020 >> kuworking ]