Layout Reference
The layout attribute controls structure, positioning, and flow.
Display & Container
Flex
- Flex Shorthand -
flex:1,flex:auto,flex:none - Flex Basis -
basis:0,basis:full,basis:[value] - Flex Direction -
row,col,row-reverse,col-reverse - Flex Wrap -
wrap,nowrap,wrap-reverse - Flex Items -
grow,shrink,grow:0,shrink:0 - Order -
order:first,order:last,order:1-12
Alignment
- Justify Content -
justify:start,justify:center,justify:between - Justify Items -
justify-items:start,justify-items:center - Justify Self -
justify-self:start,justify-self:center - Align Content -
content:start,content:center - Align Items -
items:start,items:center,items:end - Align Self -
self:start,self:center,self:end - Place Content -
place-content:center - Place Items -
place-items:center - Place Self -
place-self:center - Shorthand -
center,start,end,between
Grid
- Grid Columns -
grid-cols:1-12 - Grid Rows -
grid-rows:1-6 - Column Span -
col-span:1-12,col-span:full - Row Span -
row-span:1-6,row-span:full - Auto Flow -
grid-flow:row,grid-flow:col,grid-flow:dense - Auto Sizing -
auto-cols:fr,auto-rows:min
Positioning
- Position -
static,relative,absolute,fixed,sticky - Inset -
inset:0,top:0,right:0,bottom:0,left:0 - Z-Index -
z:base,z:low,z:mid,z:high,z:top
Utilities
- Visibility -
visible,invisible - Overflow -
overflow:hidden,overflow:auto,overflow:scroll - Overscroll -
overscroll:contain,overscroll:none - Aspect Ratio -
aspect:square,aspect:video - Columns -
cols:1-4 - Object Fit -
object:cover,object:contain - Object Position -
object-pos:top,object-pos:center - Float & Clear -
float:left,float:right,clear:both - Isolation -
isolate - Box Sizing -
box-border,box-content
Tables
- Border Collapse -
border-collapse,border-separate - Border Spacing -
border-spacing:0,border-spacing:[value] - Table Layout -
table-auto,table-fixed - Caption Side -
caption-top,caption-bottom
Quick Example
html
<div layout="flex col tab:row center wrap" space="g:medium">
Responsive flexbox layout
</div>