LGC-grids| March 7 2023 New custom column replaces LGCEdit SC-91278: “column”[revision]





The custom column shortcode

The new column shortcode is customizable, responsive and offers an amazing flexibilty for grid layouts




1: span p1
2: span pw5
3: div p1
4: div pw5








card1
card1bkp | 1/3 = 33.33%
i0
i1
C1bkp 1

LGC-grids


h1-info1

Btn: Nr 1. / 25807


h0 base overlay
i1
C1bkp 2

LGC-grids


h1-info1a

Btn: Nr 1. / 25807



i0
i1
C1bkp 3

LGC-grids


h1-info1

Btn: Nr 1. / 25807


h0 base overlay
i1
C1bkp 4

LGC-grids


h1-info1a

Btn: Nr 1. / 25807



h0 base overlay
i1
Wrapper2• 5

LGC-grids


wrapper2• - contain2•

Btn: Nr 1. / 25807

THIS IS CONTENT123
IN WRAPPER123
Centered W & H
3cards | 1/3 = 33.33%
Kommunikasjon
Se kursprogrammet





The clear Property

leftDIV This DIV floats left This DIV floats left This DIV floats left
rightDIV This DIV floats right (clear:right)
myContent (clear:none)
#leftDIV  {float:left; width:80px;  background-color:rgba(163,193,253,1); margin:8px; padding:10px;}
#rightDIV {float:right; clear:right;  width:140px; background-color:rgba(253,153,153,1); margin:8px; padding:10px;}
#myContent1 {margin:12px; clear:none;} #myContent2 {margin:12px; clear:right;} 

!! Margin does not work consistently inside floats !!
myContent (clear:right)
#leftDIV  {float:left; width:80px;  background-color:rgba(163,193,253,1); margin:8px; padding:10px;}
#rightDIV {float:right; clear:right;  width:140px; background-color:rgba(253,153,153,1); margin:8px; padding:10px;}
#myContent1 {margin:12px; clear:none;} #myContent2 {clear:right;} #myContent2 {clear:left;} 
myContent (clear:left)
#leftDIV  {float:left; width:80px;  background-color:rgba(163,193,253,1); margin:8px; padding:10px;}
#rightDIV {float:right; clear:right;  width:140px; background-color:rgba(253,153,153,1); margin:8px; padding:10px;}
#myContent1 {margin:12px; clear:none;} #myContent2 {margin:12px; clear:right;} #myContent3 {margin:12px; clear:left;}
!! Margin works ok here !!


LGC-gridsCSS styling architecture – Shortcode options: class, style, equal_heights TB Replaced by “columns”

There are native tags and custom oneslgc-grid-parent – (Native | Responsive | added to CSS): These are initially invisible • inside-grid-column – (Native | Responsive | added to CSS): These are initially invisible • Lgc0, Lgc1(Responsive), Lgc2 – (ELM added to CSS) (Add borders & better manage the margins on mobile) •LGC0
LGC1
LGC1
LGC1
LGC1