grid - editor button

Mise en page par grid

Facilite une mise en page responsive en utilisant les propriétés CSS grid
syntaxe {up grid='a a b' 'a a b' 'c d b'}

🟩 upbtn-makefile PREFS.INI :
2cols : grid='image texte' | mobile-grid='image' 'texte' | css-head=#id .image[tc]#id .texte[display:flex;justify-content:center;flex-direction: column;]
bento1+2 : grid='resultat code' 'resultat explication' | mobile-grid='resultat' 'code' 'explication' | items-style-*=bd-gris p1

mise en page par grid-template-areas

grid ▼

tablet-grid

mobile-grid

taille des colonnes et des lignes

grid-template-columns

tablet-grid-template-columns

mobile-grid-template-columns

grid-template-rows

mobile-grid-template-rows

tablet-grid-template-rows

taille et position des items placés en dehors des zones définies ci-dessus)

grid-auto-columns

grid-auto-rows

grid-auto-flow

nom des zones et répétition

zone-name

grid-repeat

espace entre les lignes et les colonnes

gap

tablet-gap

mobile-gap

alignement et répartition des items dans le conteneur

place-content

tablet-place-content

mobile-place-content

place-items

tablet-place-items

mobile-place-items

style des contenus

items-style-*

tablet-items-style-*

mobile-items-style-*

breakpoints - points de rupture

tablet-bp (px)

mobile-bp (px)

Style pour le conteneur parent

main-tag

main-style

main-mobile-style

main-tablet-style

Divers

css-head