framework7/components/grid/grid-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-grid-gap:16px}.grid{display:grid}.grid.grid-gap{gap:var(--f7-grid-gap)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}@media (min-width:480px){.xsmall-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xsmall-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.xsmall-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xsmall-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.xsmall-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xsmall-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.xsmall-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xsmall-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.xsmall-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xsmall-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.xsmall-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xsmall-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.xsmall-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xsmall-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.xsmall-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xsmall-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.xsmall-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xsmall-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.xsmall-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xsmall-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.xsmall-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xsmall-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.xsmall-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xsmall-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.xsmall-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.xsmall-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.xsmall-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.xsmall-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.xsmall-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.xsmall-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.xsmall-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.xsmall-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.xsmall-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.xsmall-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.xsmall-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.xsmall-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.xsmall-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.xsmall-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.xsmall-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.xsmall-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:568px){.small-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.small-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.small-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.small-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.small-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.small-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.small-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.small-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.small-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.small-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.small-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.small-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.small-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.small-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.small-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.small-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.small-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.small-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.small-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.small-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.small-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.small-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.small-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.small-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.small-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.small-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.small-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.small-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.small-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.small-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.small-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.small-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.small-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.small-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.small-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.small-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.small-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.small-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.small-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.small-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:768px){.medium-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.medium-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.medium-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.medium-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.medium-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.medium-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.medium-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.medium-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.medium-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.medium-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.medium-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.medium-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.medium-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.medium-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.medium-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.medium-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.medium-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.medium-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.medium-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.medium-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.medium-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.medium-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.medium-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.medium-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.medium-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.medium-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.medium-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.medium-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.medium-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.medium-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.medium-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.medium-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.medium-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.medium-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.medium-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.medium-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.medium-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.medium-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.medium-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.medium-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:1024px){.large-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.large-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.large-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.large-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.large-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.large-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.large-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.large-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.large-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.large-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.large-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.large-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.large-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.large-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.large-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.large-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.large-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.large-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.large-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.large-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.large-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.large-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.large-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.large-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.large-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.large-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.large-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.large-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.large-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.large-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.large-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.large-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.large-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.large-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.large-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.large-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.large-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.large-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.large-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.large-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}@media (min-width:1200px){.xlarge-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xlarge-grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.xlarge-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xlarge-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.xlarge-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xlarge-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.xlarge-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xlarge-grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.xlarge-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xlarge-grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))}.xlarge-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xlarge-grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))}.xlarge-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xlarge-grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))}.xlarge-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xlarge-grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))}.xlarge-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xlarge-grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))}.xlarge-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xlarge-grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.xlarge-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xlarge-grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))}.xlarge-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xlarge-grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))}.xlarge-grid-cols-13{grid-template-columns:repeat(13,minmax(0,1fr))}.xlarge-grid-rows-13{grid-template-rows:repeat(13,minmax(0,1fr))}.xlarge-grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.xlarge-grid-rows-14{grid-template-rows:repeat(14,minmax(0,1fr))}.xlarge-grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.xlarge-grid-rows-15{grid-template-rows:repeat(15,minmax(0,1fr))}.xlarge-grid-cols-16{grid-template-columns:repeat(16,minmax(0,1fr))}.xlarge-grid-rows-16{grid-template-rows:repeat(16,minmax(0,1fr))}.xlarge-grid-cols-17{grid-template-columns:repeat(17,minmax(0,1fr))}.xlarge-grid-rows-17{grid-template-rows:repeat(17,minmax(0,1fr))}.xlarge-grid-cols-18{grid-template-columns:repeat(18,minmax(0,1fr))}.xlarge-grid-rows-18{grid-template-rows:repeat(18,minmax(0,1fr))}.xlarge-grid-cols-19{grid-template-columns:repeat(19,minmax(0,1fr))}.xlarge-grid-rows-19{grid-template-rows:repeat(19,minmax(0,1fr))}.xlarge-grid-cols-20{grid-template-columns:repeat(20,minmax(0,1fr))}.xlarge-grid-rows-20{grid-template-rows:repeat(20,minmax(0,1fr))}}