Grids
Themalize includes two CSS grids for content and page layout, an auto grid for creating checkerboard pattern content, and a columns grid for designing page and content layouts. Both are disabled by default, each can be enabled in the configuration.scss document as described below.
Auto grid (anchor)
With $enable-grid-auto: true;
The auto grids use the .grid utility class combined with 12 different columns classes on a wrapper to create a checkboard pattern of all child elements. In the example below the g-4 utility is used to create 4 equal columns using repeat(4, minmax(0, 1fr)) values applied to the grid-template-columns property.
1
2
3
4
The gap and padding classes used below are included with the optional spacing utilities.
<div class="grid g-4 gap-3">
<div class="surf-1 p-2">1</div>
<div class="surf-1 p-2">2</div>
<div class="surf-1 p-2">3</div>
<div class="surf-1 p-2">4</div>
</div>The following example includes responsive modifiers using the Themalize breakpoints, the 4 columns will change to 2 columns at the medium breakpoint then into a single column at extra-small.
1
2
3
4
<div class="grid g-1-xs g-2-md g-4 gap-3">
<div class="surf-1 p-2">1</div>
<div class="surf-1 p-2">2</div>
<div class="surf-1 p-2">3</div>
<div class="surf-1 p-2">4</div>
</div>CSS (anchor)
The auto grid utilities use CSS variables for both properties and values to help minimise the use of repetitive attributes, and can also be used to create custom grids if required.
Auto grid CSS
Please note no grid-template-row utilities are included, the property is included with the .grid utility to allow adding row values to the grids using the --gtr variable which has no pre-defined value.
:where(html) {
--g-1: minmax(0, 1fr);
--g-2: repeat(2, minmax(0, 1fr));
--g-3: repeat(3, minmax(0, 1fr));
--g-4: repeat(4, minmax(0, 1fr));
--g-5: repeat(5, minmax(0, 1fr));
--g-6: repeat(6, minmax(0, 1fr));
--g-7: repeat(7, minmax(0, 1fr));
--g-8: repeat(8, minmax(0, 1fr));
--g-9: repeat(9, minmax(0, 1fr));
--g-10: repeat(10, minmax(0, 1fr));
--g-11: repeat(11, minmax(0, 1fr));
--g-12: repeat(12, minmax(0, 1fr));
}
.grid {
display: grid;
grid-template-columns: var(--gtc);
grid-template-rows: var(--gtr);
}
.g-1 {
--gtc: var(--g-1);
}
.g-2 {
--gtc: var(--g-2);
}
.g-3 {
--gtc: var(--g-3);
}
.g-4 {
--gtc: var(--g-4);
}
.g-5 {
--gtc: var(--g-5);
}
.g-6 {
--gtc: var(--g-6);
}
.g-7 {
--gtc: var(--g-7);
}
.g-8 {
--gtc: var(--g-8);
}
.g-9 {
--gtc: var(--g-9);
}
.g-10 {
--gtc: var(--g-10);
}
.g-11 {
--gtc: var(--g-11);
}
.g-12 {
--gtc: var(--g-12);
}
@media (max-width: 1601px) {
.g-1-xl {
--gtc: var(--g-1);
}
.g-2-xl {
--gtc: var(--g-2);
}
.g-3-xl {
--gtc: var(--g-3);
}
.g-4-xl {
--gtc: var(--g-4);
}
.g-5-xl {
--gtc: var(--g-5);
}
.g-6-xl {
--gtc: var(--g-6);
}
.g-7-xl {
--gtc: var(--g-7);
}
.g-8-xl {
--gtc: var(--g-8);
}
.g-9-xl {
--gtc: var(--g-9);
}
.g-10-xl {
--gtc: var(--g-10);
}
.g-11-xl {
--gtc: var(--g-11);
}
.g-12-xl {
--gtc: var(--g-12);
}
}
@media (max-width: 1281px) {
.g-1-lg {
--gtc: var(--g-1);
}
.g-2-lg {
--gtc: var(--g-2);
}
.g-3-lg {
--gtc: var(--g-3);
}
.g-4-lg {
--gtc: var(--g-4);
}
.g-5-lg {
--gtc: var(--g-5);
}
.g-6-lg {
--gtc: var(--g-6);
}
.g-7-lg {
--gtc: var(--g-7);
}
.g-8-lg {
--gtc: var(--g-8);
}
.g-9-lg {
--gtc: var(--g-9);
}
.g-10-lg {
--gtc: var(--g-10);
}
.g-11-lg {
--gtc: var(--g-11);
}
.g-12-lg {
--gtc: var(--g-12);
}
}
@media (max-width: 1025px) {
.g-1-md {
--gtc: var(--g-1);
}
.g-2-md {
--gtc: var(--g-2);
}
.g-3-md {
--gtc: var(--g-3);
}
.g-4-md {
--gtc: var(--g-4);
}
.g-5-md {
--gtc: var(--g-5);
}
.g-6-md {
--gtc: var(--g-6);
}
.g-7-md {
--gtc: var(--g-7);
}
.g-8-md {
--gtc: var(--g-8);
}
.g-9-md {
--gtc: var(--g-9);
}
.g-10-md {
--gtc: var(--g-10);
}
.g-11-md {
--gtc: var(--g-11);
}
.g-12-md {
--gtc: var(--g-12);
}
}
@media (max-width: 769px) {
.g-1-sm {
--gtc: var(--g-1);
}
.g-2-sm {
--gtc: var(--g-2);
}
.g-3-sm {
--gtc: var(--g-3);
}
.g-4-sm {
--gtc: var(--g-4);
}
.g-5-sm {
--gtc: var(--g-5);
}
.g-6-sm {
--gtc: var(--g-6);
}
.g-7-sm {
--gtc: var(--g-7);
}
.g-8-sm {
--gtc: var(--g-8);
}
.g-9-sm {
--gtc: var(--g-9);
}
.g-10-sm {
--gtc: var(--g-10);
}
.g-11-sm {
--gtc: var(--g-11);
}
.g-12-sm {
--gtc: var(--g-12);
}
}
@media (max-width: 481px) {
.g-1-xs {
--gtc: var(--g-1);
}
.g-2-xs {
--gtc: var(--g-2);
}
.g-3-xs {
--gtc: var(--g-3);
}
.g-4-xs {
--gtc: var(--g-4);
}
.g-5-xs {
--gtc: var(--g-5);
}
.g-6-xs {
--gtc: var(--g-6);
}
.g-7-xs {
--gtc: var(--g-7);
}
.g-8-xs {
--gtc: var(--g-8);
}
.g-9-xs {
--gtc: var(--g-9);
}
.g-10-xs {
--gtc: var(--g-10);
}
.g-11-xs {
--gtc: var(--g-11);
}
.g-12-xs {
--gtc: var(--g-12);
}
}Grid columns (anchor)
With $enable-grid-columns: true;
The grid columns use the .grid-col utility on a wrapper with numbered .col-* classes applied to the individual child elements within the wrapper to create the grid.
.col-3
.col-6
.col-3
<div class="grid-col gap-3">
<div class="col-3 surf-1 p-2">.col-3</div>
<div class="col-6 surf-1 p-2">.col-6</div>
<div class="col-3 surf-1 p-2">.col-3</div>
</div>The grid row-* utilities will automatically push any following columns out to start from next available space.
.col-3 .row-2
.col-6
.col-3
.col-6
.col-3
<div class="grid-col gap-3">
<div class="col-3 row-2 surf-1 p-2">.col-3 .row-2</div>
<div class="col-6 surf-1 p-2">.col-6</div>
<div class="col-3 surf-1 p-2">.col-3</div>
<div class="col-6 surf-1 p-2">.col-6</div>
<div class="col-3 surf-1 p-2">.col-3</div>
</div>The col-start-* utilities allow controlling where the columns start
.col-3
.col-6
.col-3
.col-6 .col-start-4
.col-3
<div class="grid-col gap-3">
<div class="col-3 surf-1 p-2">.col-3</div>
<div class="col-6 surf-1 p-2">.col-6</div>
<div class="col-3 surf-1 p-2">.col-3</div>
<div class="col-6 col-start-4 surf-1 p-2">.col-6 .col-start-4</div>
<div class="col-3 surf-1 p-2">.col-3</div>
</div>CSS (anchor)
The grid columns utilities and responsive modifiers are compiled as follows:
Grid columns CSS
.grid-col {
--rows: repeat(var(--row, 1), minmax(0, 1fr));
display: grid;
grid-template-columns: repeat(var(--columns, 12), minmax(0, 1fr));
grid-template-rows: var(--rows);
}
.col-0 {
grid-column: initial;
}
.col-1 {
grid-column: auto/span 1;
}
.col-2 {
grid-column: auto/span 2;
}
.col-3 {
grid-column: auto/span 3;
}
.col-4 {
grid-column: auto/span 4;
}
.col-5 {
grid-column: auto/span 5;
}
.col-6 {
grid-column: auto/span 6;
}
.col-7 {
grid-column: auto/span 7;
}
.col-8 {
grid-column: auto/span 8;
}
.col-9 {
grid-column: auto/span 9;
}
.col-10 {
grid-column: auto/span 10;
}
.col-11 {
grid-column: auto/span 11;
}
.col-12 {
grid-column: auto/span 12;
}
.row-0 {
grid-row: initial;
}
.row-1 {
grid-row: auto/span 1;
}
.row-2 {
grid-row: auto/span 2;
}
.row-3 {
grid-row: auto/span 3;
}
.row-4 {
grid-row: auto/span 4;
}
.row-5 {
grid-row: auto/span 5;
}
.row-6 {
grid-row: auto/span 6;
}
.row-7 {
grid-row: auto/span 7;
}
.row-8 {
grid-row: auto/span 8;
}
.row-9 {
grid-row: auto/span 9;
}
.row-10 {
grid-row: auto/span 10;
}
.row-11 {
grid-row: auto/span 11;
}
.row-12 {
grid-row: auto/span 12;
}
.col-start-0 {
grid-column-start: 0;
}
.col-start-1 {
grid-column-start: 1;
}
.col-start-2 {
grid-column-start: 2;
}
.col-start-3 {
grid-column-start: 3;
}
.col-start-4 {
grid-column-start: 4;
}
.col-start-5 {
grid-column-start: 5;
}
.col-start-6 {
grid-column-start: 6;
}
.col-start-7 {
grid-column-start: 7;
}
.col-start-8 {
grid-column-start: 8;
}
.col-start-9 {
grid-column-start: 9;
}
.col-start-10 {
grid-column-start: 10;
}
.col-start-11 {
grid-column-start: 11;
}
.col-start-12 {
grid-column-start: 12;
}
@media (max-width: 1601px) {
.col-0-xl {
grid-column: initial;
}
.col-1-xl {
grid-column: auto/span 1;
}
.col-2-xl {
grid-column: auto/span 2;
}
.col-3-xl {
grid-column: auto/span 3;
}
.col-4-xl {
grid-column: auto/span 4;
}
.col-5-xl {
grid-column: auto/span 5;
}
.col-6-xl {
grid-column: auto/span 6;
}
.col-7-xl {
grid-column: auto/span 7;
}
.col-8-xl {
grid-column: auto/span 8;
}
.col-9-xl {
grid-column: auto/span 9;
}
.col-10-xl {
grid-column: auto/span 10;
}
.col-11-xl {
grid-column: auto/span 11;
}
.col-12-xl {
grid-column: auto/span 12;
}
.row-0-xl {
grid-row: initial;
}
.row-1-xl {
grid-row: auto/span 1;
}
.row-2-xl {
grid-row: auto/span 2;
}
.row-3-xl {
grid-row: auto/span 3;
}
.row-4-xl {
grid-row: auto/span 4;
}
.row-5-xl {
grid-row: auto/span 5;
}
.row-6-xl {
grid-row: auto/span 6;
}
.row-7-xl {
grid-row: auto/span 7;
}
.row-8-xl {
grid-row: auto/span 8;
}
.row-9-xl {
grid-row: auto/span 9;
}
.row-10-xl {
grid-row: auto/span 10;
}
.row-11-xl {
grid-row: auto/span 11;
}
.row-12-xl {
grid-row: auto/span 12;
}
.col-start-0-xl {
grid-column-start: 0;
}
.col-start-1-xl {
grid-column-start: 1;
}
.col-start-2-xl {
grid-column-start: 2;
}
.col-start-3-xl {
grid-column-start: 3;
}
.col-start-4-xl {
grid-column-start: 4;
}
.col-start-5-xl {
grid-column-start: 5;
}
.col-start-6-xl {
grid-column-start: 6;
}
.col-start-7-xl {
grid-column-start: 7;
}
.col-start-8-xl {
grid-column-start: 8;
}
.col-start-9-xl {
grid-column-start: 9;
}
.col-start-10-xl {
grid-column-start: 10;
}
.col-start-11-xl {
grid-column-start: 11;
}
.col-start-12-xl {
grid-column-start: 12;
}
}
@media (max-width: 1281px) {
.col-0-lg {
grid-column: initial;
}
.col-1-lg {
grid-column: auto/span 1;
}
.col-2-lg {
grid-column: auto/span 2;
}
.col-3-lg {
grid-column: auto/span 3;
}
.col-4-lg {
grid-column: auto/span 4;
}
.col-5-lg {
grid-column: auto/span 5;
}
.col-6-lg {
grid-column: auto/span 6;
}
.col-7-lg {
grid-column: auto/span 7;
}
.col-8-lg {
grid-column: auto/span 8;
}
.col-9-lg {
grid-column: auto/span 9;
}
.col-10-lg {
grid-column: auto/span 10;
}
.col-11-lg {
grid-column: auto/span 11;
}
.col-12-lg {
grid-column: auto/span 12;
}
.row-0-lg {
grid-row: initial;
}
.row-1-lg {
grid-row: auto/span 1;
}
.row-2-lg {
grid-row: auto/span 2;
}
.row-3-lg {
grid-row: auto/span 3;
}
.row-4-lg {
grid-row: auto/span 4;
}
.row-5-lg {
grid-row: auto/span 5;
}
.row-6-lg {
grid-row: auto/span 6;
}
.row-7-lg {
grid-row: auto/span 7;
}
.row-8-lg {
grid-row: auto/span 8;
}
.row-9-lg {
grid-row: auto/span 9;
}
.row-10-lg {
grid-row: auto/span 10;
}
.row-11-lg {
grid-row: auto/span 11;
}
.row-12-lg {
grid-row: auto/span 12;
}
.col-start-0-lg {
grid-column-start: 0;
}
.col-start-1-lg {
grid-column-start: 1;
}
.col-start-2-lg {
grid-column-start: 2;
}
.col-start-3-lg {
grid-column-start: 3;
}
.col-start-4-lg {
grid-column-start: 4;
}
.col-start-5-lg {
grid-column-start: 5;
}
.col-start-6-lg {
grid-column-start: 6;
}
.col-start-7-lg {
grid-column-start: 7;
}
.col-start-8-lg {
grid-column-start: 8;
}
.col-start-9-lg {
grid-column-start: 9;
}
.col-start-10-lg {
grid-column-start: 10;
}
.col-start-11-lg {
grid-column-start: 11;
}
.col-start-12-lg {
grid-column-start: 12;
}
}
@media (max-width: 1025px) {
.col-0-md {
grid-column: initial;
}
.col-1-md {
grid-column: auto/span 1;
}
.col-2-md {
grid-column: auto/span 2;
}
.col-3-md {
grid-column: auto/span 3;
}
.col-4-md {
grid-column: auto/span 4;
}
.col-5-md {
grid-column: auto/span 5;
}
.col-6-md {
grid-column: auto/span 6;
}
.col-7-md {
grid-column: auto/span 7;
}
.col-8-md {
grid-column: auto/span 8;
}
.col-9-md {
grid-column: auto/span 9;
}
.col-10-md {
grid-column: auto/span 10;
}
.col-11-md {
grid-column: auto/span 11;
}
.col-12-md {
grid-column: auto/span 12;
}
.row-0-md {
grid-row: initial;
}
.row-1-md {
grid-row: auto/span 1;
}
.row-2-md {
grid-row: auto/span 2;
}
.row-3-md {
grid-row: auto/span 3;
}
.row-4-md {
grid-row: auto/span 4;
}
.row-5-md {
grid-row: auto/span 5;
}
.row-6-md {
grid-row: auto/span 6;
}
.row-7-md {
grid-row: auto/span 7;
}
.row-8-md {
grid-row: auto/span 8;
}
.row-9-md {
grid-row: auto/span 9;
}
.row-10-md {
grid-row: auto/span 10;
}
.row-11-md {
grid-row: auto/span 11;
}
.row-12-md {
grid-row: auto/span 12;
}
}
@media (max-width: 769px) {
.col-0-sm {
grid-column: initial;
}
.col-1-sm {
grid-column: auto/span 1;
}
.col-2-sm {
grid-column: auto/span 2;
}
.col-3-sm {
grid-column: auto/span 3;
}
.col-4-sm {
grid-column: auto/span 4;
}
.col-5-sm {
grid-column: auto/span 5;
}
.col-6-sm {
grid-column: auto/span 6;
}
.col-7-sm {
grid-column: auto/span 7;
}
.col-8-sm {
grid-column: auto/span 8;
}
.col-9-sm {
grid-column: auto/span 9;
}
.col-10-sm {
grid-column: auto/span 10;
}
.col-11-sm {
grid-column: auto/span 11;
}
.col-12-sm {
grid-column: auto/span 12;
}
.row-0-sm {
grid-row: initial;
}
.row-1-sm {
grid-row: auto/span 1;
}
.row-2-sm {
grid-row: auto/span 2;
}
.row-3-sm {
grid-row: auto/span 3;
}
.row-4-sm {
grid-row: auto/span 4;
}
.row-5-sm {
grid-row: auto/span 5;
}
.row-6-sm {
grid-row: auto/span 6;
}
.row-7-sm {
grid-row: auto/span 7;
}
.row-8-sm {
grid-row: auto/span 8;
}
.row-9-sm {
grid-row: auto/span 9;
}
.row-10-sm {
grid-row: auto/span 10;
}
.row-11-sm {
grid-row: auto/span 11;
}
.row-12-sm {
grid-row: auto/span 12;
}
.col-start-0-sm {
grid-column-start: 0;
}
.col-start-1-sm {
grid-column-start: 1;
}
.col-start-2-sm {
grid-column-start: 2;
}
.col-start-3-sm {
grid-column-start: 3;
}
.col-start-4-sm {
grid-column-start: 4;
}
.col-start-5-sm {
grid-column-start: 5;
}
.col-start-6-sm {
grid-column-start: 6;
}
.col-start-7-sm {
grid-column-start: 7;
}
.col-start-8-sm {
grid-column-start: 8;
}
.col-start-9-sm {
grid-column-start: 9;
}
.col-start-10-sm {
grid-column-start: 10;
}
.col-start-11-sm {
grid-column-start: 11;
}
.col-start-12-sm {
grid-column-start: 12;
}
}
@media (max-width: 481px) {
.col-0-xs {
grid-column: initial;
}
.col-1-xs {
grid-column: auto/span 1;
}
.col-2-xs {
grid-column: auto/span 2;
}
.col-3-xs {
grid-column: auto/span 3;
}
.col-4-xs {
grid-column: auto/span 4;
}
.col-5-xs {
grid-column: auto/span 5;
}
.col-6-xs {
grid-column: auto/span 6;
}
.col-7-xs {
grid-column: auto/span 7;
}
.col-8-xs {
grid-column: auto/span 8;
}
.col-9-xs {
grid-column: auto/span 9;
}
.col-10-xs {
grid-column: auto/span 10;
}
.col-11-xs {
grid-column: auto/span 11;
}
.col-12-xs {
grid-column: auto/span 12;
}
.row-0-xs {
grid-row: initial;
}
.row-1-xs {
grid-row: auto/span 1;
}
.row-2-xs {
grid-row: auto/span 2;
}
.row-3-xs {
grid-row: auto/span 3;
}
.row-4-xs {
grid-row: auto/span 4;
}
.row-5-xs {
grid-row: auto/span 5;
}
.row-6-xs {
grid-row: auto/span 6;
}
.row-7-xs {
grid-row: auto/span 7;
}
.row-8-xs {
grid-row: auto/span 8;
}
.row-9-xs {
grid-row: auto/span 9;
}
.row-10-xs {
grid-row: auto/span 10;
}
.row-11-xs {
grid-row: auto/span 11;
}
.row-12-xs {
grid-row: auto/span 12;
}
.col-start-0-xs {
grid-column-start: 0;
}
.col-start-1-xs {
grid-column-start: 1;
}
.col-start-2-xs {
grid-column-start: 2;
}
.col-start-3-xs {
grid-column-start: 3;
}
.col-start-4-xs {
grid-column-start: 4;
}
.col-start-5-xs {
grid-column-start: 5;
}
.col-start-6-xs {
grid-column-start: 6;
}
.col-start-7-xs {
grid-column-start: 7;
}
.col-start-8-xs {
grid-column-start: 8;
}
.col-start-9-xs {
grid-column-start: 9;
}
.col-start-10-xs {
grid-column-start: 10;
}
.col-start-11-xs {
grid-column-start: 11;
}
.col-start-12-xs {
grid-column-start: 12;
}
}