Generador de Flexbox i CSS Grid

Com utilitzar el generador de flexbox i grid

1. Tria una Maquetació: Flexbox o Grid, o comença per un dels Predefinits (Centrat, Barra de navegació, Targetes que s’ajusten, Barra lateral, Quadrícula de targetes adaptable, Holy grail, 12 columnes).
2. Defineix les propietats del Contenidor. Per a flexbox: flex-direction i flex-wrap. Per a grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items i grid-template-areas. Els dos comparteixen justify-content, align-items, align-content, row-gap (px) i column-gap (px).
3. Gestiona els Elements amb Afegeix un element, Elimina l’element seleccionat i Restableix l’element seleccionat. Fes clic en un element de la previsualització (o navega-hi amb el tabulador i prem Retorn) per seleccionar-lo.
4. Edita l’element seleccionat: order i align-self en tots dos modes, flex-grow, flex-shrink i flex-basis per a flexbox, i grid-area, grid-column, grid-row i justify-self per a grid.
5. Copia el Codi CSS i el Codi HTML corresponent amb els seus botons Copia.

Tots els controls són camps de formulari estàndard, de manera que tot el generador funciona només amb el teclat. El CSS només conté les propietats que has canviat respecte dels valors per defecte, cosa que el manté curt, i els elements amb la mateixa configuració comparteixen una regla (.item quan tots coincideixen).

Flexbox en poques paraules

Flexbox col·loca els elements al llarg d’un eix. flex-direction fixa l’eix principal (una fila o una columna); justify-content reparteix els elements al llarg d’ell (center, space-between…), i align-items els posiciona a l’eix transversal. Amb flex-wrap: wrap, els elements que no hi caben passen a una línia nova, i align-content espaia aleshores aquestes línies.

Cada element té tres propietats de mida, que normalment s’escriuen juntes com a flex:

• flex-basis: la mida inicial (auto fa servir el contingut o width);
• flex-grow: quanta part de l’espai lliure ocupa l’element (0 = cap, 1 = una part igual);
• flex-shrink: quant cedeix quan falta espai (0 = no s’encongeix mai).

El predefinit Barra lateral mostra el patró clàssic: una barra lateral amb flex-basis: 200px i flex-shrink: 0, i una àrea principal amb flex-grow: 1.

CSS Grid en poques paraules

Grid col·loca els elements en dues dimensions. grid-template-columns: repeat(3, 1fr) crea tres columnes iguals; fr és una part de l’espai lliure. repeat(auto-fill, minmax(120px, 1fr)) crea tantes columnes d’almenys 120px com hi càpiguen, cosa que forma una quadrícula de targetes adaptable sense cap media query.

Els elements omplen les cel·les per ordre, tret que els col·loquis: grid-column: span 2 fa que un element ocupi dues columnes, i grid-column: 1 / -1 l’estira per tota la fila.

grid-template-areas et permet dibuixar la maquetació amb noms. Escriu una fila per línia, per exemple header header i després nav main, i dona als elements grid-area: header o grid-area: main. Un punt marca una cel·la buida. Totes les files necessiten el mateix nombre de cel·les i cada nom ha de formar un rectangle; si no, l’eina t’ho adverteix.