skip to Main Content

Grid Template Columns

GridResponsive
The grid-template-columns CSS property is used to define the number of columns displayed in a grid element.
Class Properties
wpex-grid-cols-1
-ms-grid-columns: repeat(1, minmax(0, 2fr));
grid-template-columns: repeat(1, minmax(0, 2fr));
wpex-grid-cols-2
-ms-grid-columns: repeat(2, minmax(0, 2fr));
grid-template-columns: repeat(2, minmax(0, 2fr));
wpex-grid-cols-3
-ms-grid-columns: repeat(3, minmax(0, 2fr));
grid-template-columns: repeat(3, minmax(0, 2fr));
wpex-grid-cols-4
-ms-grid-columns: repeat(4 minmax(0, 2fr));
grid-template-columns: repeat(4, minmax(0, 2fr));
wpex-grid-cols-5
-ms-grid-columns: repeat(5 minmax(0, 2fr));
grid-template-columns: repeat(5, minmax(0, 2fr));
wpex-grid-cols-6
-ms-grid-columns: repeat(6 minmax(0, 2fr));
grid-template-columns: repeat(6, minmax(0, 2fr));
wpex-grid-cols-7
-ms-grid-columns: repeat(7 minmax(0, 2fr));
grid-template-columns: repeat(7, minmax(0, 2fr));
wpex-grid-cols-8
-ms-grid-columns: repeat(8 minmax(0, 2fr));
grid-template-columns: repeat(8, minmax(0, 2fr));
wpex-grid-cols-9
-ms-grid-columns: repeat(9 minmax(0, 2fr));
grid-template-columns: repeat(9, minmax(0, 2fr));
wpex-grid-cols-10
-ms-grid-columns: repeat(10 minmax(0, 2fr));
grid-template-columns: repeat(10, minmax(0, 2fr));
wpex-grid-cols-11
-ms-grid-columns: repeat(11 minmax(0, 2fr));
grid-template-columns: repeat(11, minmax(0, 2fr));
wpex-grid-cols-12
-ms-grid-columns: repeat(12 minmax(0, 2fr));
grid-template-columns: repeat(12, minmax(0, 2fr));