LGC-grids| March 7 2023 New custom column replaces LGC | Edit 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-grids | CSS styling architecture – Shortcode options: class, style, equal_heights TB Replaced by “columns”
There are native tags and custom ones • lgc-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