smart-webcomponents-react/source/styles/components/smart.gridlayout.css

[](https://jqwidgets.com/license/)

.smart-grid-layout .col,.smart-grid-layout .col-1,.smart-grid-layout .col-10,.smart-grid-layout .col-11,.smart-grid-layout .col-12,.smart-grid-layout .col-2,.smart-grid-layout .col-3,.smart-grid-layout .col-4,.smart-grid-layout .col-5,.smart-grid-layout .col-6,.smart-grid-layout .col-7,.smart-grid-layout .col-8,.smart-grid-layout .col-9,.smart-grid-layout .col-lg,.smart-grid-layout .col-lg-1,.smart-grid-layout .col-lg-10,.smart-grid-layout .col-lg-11,.smart-grid-layout .col-lg-12,.smart-grid-layout .col-lg-2,.smart-grid-layout .col-lg-3,.smart-grid-layout .col-lg-4,.smart-grid-layout .col-lg-5,.smart-grid-layout .col-lg-6,.smart-grid-layout .col-lg-7,.smart-grid-layout .col-lg-8,.smart-grid-layout .col-lg-9,.smart-grid-layout .col-md,.smart-grid-layout .col-md-1,.smart-grid-layout .col-md-10,.smart-grid-layout .col-md-11,.smart-grid-layout .col-md-12,.smart-grid-layout .col-md-2,.smart-grid-layout .col-md-3,.smart-grid-layout .col-md-4,.smart-grid-layout .col-md-5,.smart-grid-layout .col-md-6,.smart-grid-layout .col-md-7,.smart-grid-layout .col-md-8,.smart-grid-layout .col-md-9,.smart-grid-layout .col-sm,.smart-grid-layout .col-sm-1,.smart-grid-layout .col-sm-10,.smart-grid-layout .col-sm-11,.smart-grid-layout .col-sm-12,.smart-grid-layout .col-sm-2,.smart-grid-layout .col-sm-3,.smart-grid-layout .col-sm-4,.smart-grid-layout .col-sm-5,.smart-grid-layout .col-sm-6,.smart-grid-layout .col-sm-7,.smart-grid-layout .col-sm-8,.smart-grid-layout .col-sm-9,.smart-grid-layout .col-xl,.smart-grid-layout .col-xl-1,.smart-grid-layout .col-xl-10,.smart-grid-layout .col-xl-11,.smart-grid-layout .col-xl-12,.smart-grid-layout .col-xl-2,.smart-grid-layout .col-xl-3,.smart-grid-layout .col-xl-4,.smart-grid-layout .col-xl-5,.smart-grid-layout .col-xl-6,.smart-grid-layout .col-xl-7,.smart-grid-layout .col-xl-8,.smart-grid-layout .col-xl-9{position:relative;width:100%;min-height:1px;padding:15px;box-sizing:border-box;grid-column:span 12}.smart-grid-layout,.smart-grid-layout .row{display:grid;width:var(--smart-grid-layout-width);grid-gap:var(--smart-grid-layout-row-gap);grid-column-gap:var(--smart-grid-layout-col-gap);grid-template-columns:repeat(12,1fr);box-sizing:border-box}.smart-grid-layout{grid-template-rows:var(--smart-grid-layout-rows);padding:0}.smart-grid-layout .row{margin-right:auto;margin-left:auto;grid-column:span 12}.smart-grid-layout.no-gaps,.smart-grid-layout.no-gaps .row{--smart-grid-row-gap:0px;--smart-grid-column-gap:0px;grid-columns-gap:0;grid-gap:0}.smart-grid-layout .order-0{order:-1}.smart-grid-layout .order-1{order:0}.smart-grid-layout .order-2{order:1}.smart-grid-layout .order-3{order:2}.smart-grid-layout .order-4{order:3}.smart-grid-layout .order-5{order:4}.smart-grid-layout .order-6{order:5}.smart-grid-layout .order-7{order:6}.smart-grid-layout .order-8{order:7}.smart-grid-layout .order-9{order:8}.smart-grid-layout .order-10{order:9}.smart-grid-layout .order-11{order:10}.smart-grid-layout .order-12{order:11}.smart-grid-layout [span="1"]{grid-row:span 1}.smart-grid-layout [span="2"]{grid-row:span 2}.smart-grid-layout [span="3"]{grid-row:span 3}.smart-grid-layout [span="4"]{grid-row:span 4}.smart-grid-layout [span="5"]{grid-row:span 5}.smart-grid-layout [span="6"]{grid-row:span 6}.smart-grid-layout [span="7"]{grid-row:span 7}.smart-grid-layout [span="8"]{grid-row:span 8}.smart-grid-layout [span="9"]{grid-row:span 9}.smart-grid-layout [span="10"]{grid-row:span 10}.smart-grid-layout [span="11"]{grid-row:span 11}.smart-grid-layout [span="12"]{grid-row:span 12}.smart-grid-layout .col-1{grid-column:span 1}.smart-grid-layout .col-2{grid-column:span 2}.smart-grid-layout .col-3{grid-column:span 3}.smart-grid-layout .col-4{grid-column:span 4}.smart-grid-layout .col-5{grid-column:span 5}.smart-grid-layout .col-6{grid-column:span 6}.smart-grid-layout .col-7{grid-column:span 7}.smart-grid-layout .col-8{grid-column:span 8}.smart-grid-layout .col-9{grid-column:span 9}.smart-grid-layout .col-10{grid-column:span 10}.smart-grid-layout .col-11{grid-column:span 11}.smart-grid-layout .col-12{grid-column:span 12}@media (min-width:576px){.smart-grid-layout.fixed{max-width:540px}.smart-grid-layout .col-sm-1{grid-column:span 1}.smart-grid-layout .col-sm-2{grid-column:span 2}.smart-grid-layout .col-sm-3{grid-column:span 3}.smart-grid-layout .col-sm-4{grid-column:span 4}.smart-grid-layout .col-sm-5{grid-column:span 5}.smart-grid-layout .col-sm-6{grid-column:span 6}.smart-grid-layout .col-sm-7{grid-column:span 7}.smart-grid-layout .col-sm-8{grid-column:span 8}.smart-grid-layout .col-sm-9{grid-column:span 9}.smart-grid-layout .col-sm-10{grid-column:span 10}.smart-grid-layout .col-sm-11{grid-column:span 11}.smart-grid-layout .col-sm-12{grid-column:span 12}}@media (min-width:768px){.smart-grid-layout.fixed{max-width:720px}.smart-grid-layout .col-md-1{grid-column:span 1}.smart-grid-layout .col-md-2{grid-column:span 2}.smart-grid-layout .col-md-3{grid-column:span 3}.smart-grid-layout .col-md-4{grid-column:span 4}.smart-grid-layout .col-md-5{grid-column:span 5}.smart-grid-layout .col-md-6{grid-column:span 6}.smart-grid-layout .col-md-7{grid-column:span 7}.smart-grid-layout .col-md-8{grid-column:span 8}.smart-grid-layout .col-md-9{grid-column:span 9}.smart-grid-layout .col-md-10{grid-column:span 10}.smart-grid-layout .col-md-11{grid-column:span 11}.smart-grid-layout .col-md-12{grid-column:span 12}}@media (min-width:992px){.smart-grid-layout.fixed{max-width:960px}.smart-grid-layout .col-lg-1{grid-column:span 1}.smart-grid-layout .col-lg-2{grid-column:span 2}.smart-grid-layout .col-lg-3{grid-column:span 3}.smart-grid-layout .col-lg-4{grid-column:span 4}.smart-grid-layout .col-lg-5{grid-column:span 5}.smart-grid-layout .col-lg-6{grid-column:span 6}.smart-grid-layout .col-lg-7{grid-column:span 7}.smart-grid-layout .col-lg-8{grid-column:span 8}.smart-grid-layout .col-lg-9{grid-column:span 9}.smart-grid-layout .col-lg-10{grid-column:span 10}.smart-grid-layout .col-lg-11{grid-column:span 11}.smart-grid-layout .col-lg-12{grid-column:span 12}}@media (min-width:1200px){.smart-grid-layout.fixed{max-width:1140px}.smart-grid-layout .col-xl-1{grid-column:span 1}.smart-grid-layout .col-xl-2{grid-column:span 2}.smart-grid-layout .col-xl-3{grid-column:span 3}.smart-grid-layout .col-xl-4{grid-column:span 4}.smart-grid-layout .col-xl-5{grid-column:span 5}.smart-grid-layout .col-xl-6{grid-column:span 6}.smart-grid-layout .col-xl-7{grid-column:span 7}.smart-grid-layout .col-xl-8{grid-column:span 8}.smart-grid-layout .col-xl-9{grid-column:span 9}.smart-grid-layout .col-xl-10{grid-column:span 10}.smart-grid-layout .col-xl-11{grid-column:span 11}.smart-grid-layout .col-xl-12{grid-column:span 12}}.smart-stack-layout{display:flex;box-sizing:border-box;overflow:hidden;width:100%;align-items:baseline;padding:15px}.smart-stack-layout .item{display:flex;border-radius:0;box-shadow:none;min-width:100px}.smart-stack-layout.vertical{flex-direction:column}.smart-stack-layout:not(.space-around):not(.space-evenly):not(.space-between):not(.vertical) .item:first-child{border-top-left-radius:var(--smart-border-radius);border-bottom-left-radius:var(--smart-border-radius);border-top-right-radius:0;border-bottom-right-radius:0}.smart-stack-layout:not(.space-around):not(.space-evenly):not(.space-between):not(.vertical) .item:last-child{border-top-right-radius:var(--smart-border-radius);border-bottom-right-radius:var(--smart-border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.smart-stack-layout:not(.space-around):not(.space-evenly):not(.space-between).vertical .item:first-child{border-top-left-radius:var(--smart-border-radius);border-top-right-radius:var(--smart-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.smart-stack-layout:not(.space-around):not(.space-evenly):not(.space-between).vertical .item:last-child{border-bottom-right-radius:var(--smart-border-radius);border-bottom-left-radius:var(--smart-border-radius);border-top-left-radius:0;border-top-right-radius:0}.smart-stack-layout.spacing .item{margin:0 6px}.smart-stack-layout.spacing.vertical .item{margin:6px 0}.smart-stack-layout.spacing-2 .item{margin:0 12px}.smart-stack-layout.spacing-2.vertical .item{margin:12px 0}.smart-stack-layout.spacing-3 .item{margin:0 24px}.smart-stack-layout.spacing-3.vertical .item{margin:24px 0}.smart-stack-layout.spacing-4 .item{margin:0 48px}.smart-stack-layout.spacing-4.vertical .item{margin:48px 0}.smart-stack-layout.spacing-5 .item{margin:0 64px}.smart-stack-layout.spacing-5.vertical .item{margin:64px 0}.smart-stack-layout.spacing-6 .item{margin:0 128px}.smart-stack-layout.spacing-6.vertical .item{margin:128px 0}.smart-stack-layout.spacing-2:not(.vertical) .item:first-child,.smart-stack-layout.spacing-3:not(.vertical) .item:first-child,.smart-stack-layout.spacing-4:not(.vertical) .item:first-child,.smart-stack-layout.spacing-5:not(.vertical) .item:first-child,.smart-stack-layout.spacing-6:not(.vertical) .item:first-child,.smart-stack-layout.spacing:not(.vertical) .item:first-child{margin-left:0}.smart-stack-layout.spacing-2:not(.vertical) .item:last-child,.smart-stack-layout.spacing-3:not(.vertical) .item:last-child,.smart-stack-layout.spacing-4:not(.vertical) .item:last-child,.smart-stack-layout.spacing-5:not(.vertical) .item:last-child,.smart-stack-layout.spacing-6:not(.vertical) .item:last-child,.smart-stack-layout.spacing:not(.vertical) .item:last-child{margin-right:0}.smart-stack-layout.spacing-2.vertical .item:first-child,.smart-stack-layout.spacing-3.vertical .item:first-child,.smart-stack-layout.spacing-4.vertical .item:first-child,.smart-stack-layout.spacing-5.vertical .item:first-child,.smart-stack-layout.spacing-6.vertical .item:first-child,.smart-stack-layout.spacing.vertical .item:first-child{margin-top:0}.smart-stack-layout.spacing-2.vertical .item:last-child,.smart-stack-layout.spacing-3.vertical .item:last-child,.smart-stack-layout.spacing-4.vertical .item:last-child,.smart-stack-layout.spacing-5.vertical .item:last-child,.smart-stack-layout.spacing-6.vertical .item:last-child,.smart-stack-layout.spacing.vertical .item:last-child{margin-bottom:0}.smart-stack-layout .top,.smart-stack-layout:not(.vertical).top{align-items:flex-start}.smart-stack-layout .right,.smart-stack-layout:not(.vertical).right{justify-content:flex-end}.smart-stack-layout .bottom,.smart-stack-layout:not(.vertical).bottom{align-items:flex-end}.smart-stack-layout .left,.smart-stack-layout:not(.vertical).left{justify-content:flex-start}.smart-stack-layout .center,.smart-stack-layout:not(.vertical).center{justify-content:center}.smart-stack-layout .middle,.smart-stack-layout:not(.vertical).middle{align-items:center}.smart-stack-layout .space-between,.smart-stack-layout.space-between{justify-content:space-between}.smart-stack-layout .space-evenly,.smart-stack-layout.space-evenly{justify-content:space-evenly}.smart-stack-layout .space-around,.smart-stack-layout.space-around{justify-content:space-around}.smart-stack-layout.vertical.top{justify-content:flex-start}.smart-stack-layout.vertical.right{align-items:flex-end}.smart-stack-layout.vertical.bottom{justify-content:flex-end}.smart-stack-layout.vertical.left{align-items:flex-start}.smart-stack-layout.vertical.center{align-items:center}.smart-stack-layout.vertical.middle{justify-content:center}.smart-stack-layout.stretch:not(.vertical) .item,.smart-stack-layout.vertical.vertical-stretch .item{flex:1}.smart-stack-layout.stretch:not(.vertical) .item.flex-2,.smart-stack-layout.vertical.vertical-stretch .item.flex-2{flex:2}.smart-stack-layout.stretch:not(.vertical) .item.flex-3,.smart-stack-layout.vertical.vertical-stretch .item.flex-3{flex:3}.smart-stack-layout.stretch:not(.vertical) .item.flex-4,.smart-stack-layout.vertical.vertical-stretch .item.flex-4{flex:4}.smart-stack-layout.stretch:not(.vertical) .item.flex-5,.smart-stack-layout.vertical.vertical-stretch .item.flex-5{flex:5}.smart-stack-layout.stretch:not(.vertical) .item.flex-6,.smart-stack-layout.vertical.vertical-stretch .item.flex-6{flex:6}.smart-stack-layout.stretch.vertical,.smart-stack-layout:not(.vertical).vertical-stretch{align-items:stretch}