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

layout using grid-template-areas

grid ▼

tablet-grid

mobile-grid

size of columns and rows

grid-template-columns

tablet-grid-template-columns

mobile-grid-template-columns

grid-template-rows

mobile-grid-template-rows

tablet-grid-template-rows

size and position of items placed outside the defined areas above)

grid-auto-columns

grid-auto-rows

grid-auto-flow

zone names and repetition

zone-name

grid-repeat

space between rows and columns

gap

tablet-gap

mobile-gap

alignment and distribution of items in the container

place-content

tablet-place-content

mobile-place-content

place-items

tablet-place-items

mobile-place-items

style of contents

items-style-*

tablet-items-style-*

mobile-items-style-*

breakpoints - break points

tablet-bp (px)

mobile-bp (px)

Style for the parent container

main-tag

main-style

main-mobile-style

main-tablet-style

Miscellaneous

css-head