Skip to content

Grid

Styles for a grid which can be used to properly place elements on a page in an organised manner.

Structurally .grid contains following classes:

  • .grid__row - representing grid rows
  • .grid__col - representing grid columns

Grid Row

.grid__row class represents a grid row and should always be placed directly inside .grid to avoid any misplacing. Grid row class also contains following modifiers:

  • .grid__row_@{breakPointName}-vtop - aligns items horizontally at the left
  • .grid__row_@{breakPointName}-vcenter - aligns items horizontally in the center
  • .grid__row_@{breakPointName}-vbottom - aligns items horizontally at the right
  • .grid__row_@{breakPointName}-vstretch - stretches items horizontally across the row
  • .grid__row_@{breakPointName}-vbaseline - aligns items horizontally at baseline
  • .grid__row_@{breakPointName}-hleft - aligns items vertically at the top
  • .grid__row_@{breakPointName}-hcenter - aligns items vertically in the center
  • .grid__row_@{breakPointName}-hbetween - streches items vertically with equal space betweem them
  • .grid__row_@{breakPointName}-haround - streches items vertically with space around them
  • .grid__row_@{breakPointName}-hevenly - streches items vertically with equal space around them
  • .grid__row_@{breakPointName}-hright - aligns items vertically at the bottom

Where the @{breakPointName} represents the name of a breakpoint that will be targetted by a class. You can learn about specific breakpoints available in the breakpoints documentation.

Here is an example of how to use grid rows and how to not use them:

Placing a single grid row

    <div class="grid">
        <div class="grid__row">
        </div>
    </div>

    <div class="grid__row">
    </div>

Grid Column

.grid__col class represents a grid column and should always be placed directly inside .grid__row to avoid any misplacing. Grid row class also contains following modifiers:

  • .grid__col_@{breakPointName}-hleft - aligns items horizontally at the left
  • .grid__col_@{breakPointName}-hcenter - aligns items horizontally in the center
  • .grid__col_@{breakPointName}-hright - aligns items horizontally at the right
  • .grid__col_@{breakPointName}-vtop - aligns items vertically at the top
  • .grid__col_@{breakPointName}-vcenter - aligns items vertically in the center
  • .grid__col_@{breakPointName}-vbottom - aligns items vertically at the bottom
  • .grid__col_@{breakPointName}-vbetween - aligns items vertically with equal space between them

Where the @{breakPointName} represents the name of a breakpoint that will be targetted by a class. You can learn about specific breakpoints available in the breakpoints documentation.

Here are a few examples of how to use grid rows and how to not use them:

Placing a column inside a grid

    <div class="grid">
        <div class="grid__row">
            <div class="grid__col">
            </div>
        </div>
    </div>

    <div class="grid">
        <div class="grid__col">
        </div>
    </div>

Placing columns inside other columns in a grid

    <div class="grid">
        <div class="grid__row">
            <div class="grid__col">
                <div class="grid__row">
                    <div class="grid__col">
                    </div>
                </div>

                <div class="grid__row">
                     <div class="grid__col">
                     </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid">
        <div class="grid__row">
            <div class="grid__col">
                <div class="grid__col">
                </div>

                <div class="grid__col">
                </div>
            </div>
        </div>
    </div>

Overview

As you may have noticed, the grid structure should always follow a few important rules to make sure it works properly:

  1. .grid__row elements should always be placed inside .grid elements
  2. grid__col elements should always be placed inside .grid__row elements
  3. There shouldn't be any .grid__row directly inside another .grid__row. If you want to place a row inside a row, place a .grid__col first. This will be shown in the examples and applies to .grid__col elements as well.
  4. Don't use .grid__row modifiers for .grid__col and vice versa.

Grid tags

The .grid classes were designed to be used with any elements. However, a basic convention is to use them with standard <div> elements.

LESS

You can modify any grid less variable in your User Less section to change grid styles.

Warning

Changing grid variables is nto recommended and might break the page as they are being used everywhere by the Shoper Visual Editor. Modify at your own responsibility.

Grid variables

Variables used to style a grid.

@gridSize: 12;
@gridGutter: 16;
@gridGutterRemValue: (@gridGutter / @baseFontSize);
@gridGutterRem: ~'@{gridGutterRemValue}rem';

@spacing: @globalSpacing * 0.5;

@gridContainerWidth: 1200px;
@gridContainerWidthL: 1400px;
@gridContainerWidthS: 1000px;

@gridFullFirstColPaddingLeft: 0;
@gridFullLastColPaddingRight: 0;

If you want to change grid styles, you can just change the variables. To change a default gutter of the grid just modify @gridGutter variable.

@gridGutter: 10;

Grid mixins

Here are mixins that are used to create grid elements:

.generate-spacing(@iterationsNumber, @breakPointName, @iteration: 0) when (@iteration =< @iterationsNumber) {
    .mt-@{breakPointName}-@{iteration} {
        margin-top: @spacing * @iteration;
    }

    .mr-@{breakPointName}-@{iteration} {
        margin-right: @spacing * @iteration;
    }

    .ml-@{breakPointName}-@{iteration} {
        margin-left: @spacing * @iteration;
    }

    .mb-@{breakPointName}-@{iteration} {
        margin-bottom: @spacing * @iteration;
    }

    .pt-@{breakPointName}-@{iteration} {
        padding-top: @spacing* @iteration;
    }

    .pr-@{breakPointName}-@{iteration} {
        padding-right: @spacing* @iteration;
    }

    .pl-@{breakPointName}-@{iteration} {
        padding-left: @spacing* @iteration;
    }

    .pb-@{breakPointName}-@{iteration} {
        padding-bottom: @spacing* @iteration;
    }

    .m-all-@{breakPointName}-@{iteration} {
        margin: @spacing * @iteration;
    }

    .p-all-@{breakPointName}-@{iteration} {
        padding: @spacing * @iteration;
    }

    .generate-spacing(@iterationsNumber, @breakPointName, (@iteration + 1));
}

.generate-col(@iterationsNumber, @breakPointName, @iteration: 0) when (@iteration =< @iterationsNumber) {
    .grid__col_@{breakPointName}-@{iteration} {
        flex: 1 0 (@iteration / @gridSize) * 100%;
        max-width: (@iteration / @gridSize) * 100%;
    }

    .grid__col_@{breakPointName}-auto {
        flex: 0 0 auto;
        max-width: initial;
    }

    .grid__col_@{breakPointName}-grow {
        flex: 1 0;
        max-width: initial;
    }

    .generate-col(@iterationsNumber, @breakPointName, (@iteration + 1));
}

.generate-order(@iterationsNumber, @breakPointName, @iteration: 0) when (@iteration =< @iterationsNumber) {
    .grid__col_order-@{breakPointName}-@{iteration} {
        order: @iteration;
    }

    .generate-order(@iterationsNumber, @breakPointName, (@iteration + 1));
}

.generate-container-alignments(@breakPointName) {
    .grid {
        &_@{breakPointName}-hleft {
            align-items: flex-start;
        }

        &_@{breakPointName}-hcenter {
            align-items: center;
        }

        &_@{breakPointName}-hright {
            align-items: flex-end;
        }
    }
}

.generate-row-alignments(@breakPointName) {
    .grid {
        &__row {
            &_@{breakPointName}-vtop {
                align-items: flex-start;
            }

            &_@{breakPointName}-vcenter {
                align-items: center;
            }

            &_@{breakPointName}-vbottom {
                align-items: flex-end;
            }

            &_@{breakPointName}-vstretch {
                align-items: stretch;
                min-height: 100%;
            }

            &_@{breakPointName}-vbaseline {
                align-items: baseline;
                min-width: 100%;
            }

            &_@{breakPointName}-hleft {
                justify-content: flex-start;
            }

            &_@{breakPointName}-hcenter {
                justify-content: center;
            }

            &_@{breakPointName}-hbetween {
                justify-content: space-between;
            }

            &_@{breakPointName}-haround {
                justify-content: space-around;
            }

            &_@{breakPointName}-hevenly {
                justify-content: space-evenly;
            }

            &_@{breakPointName}-hright {
                justify-content: flex-end;
            }
        }
    }
}

.generate-col-alignments(@breakPointName) {
    .grid {
        &__col {
            &_@{breakPointName}-hleft {
                justify-items: start;
            }

            &_@{breakPointName}-hcenter {
                justify-items: center;
            }

            &_@{breakPointName}-hright {
                justify-items: end;
            }

            &_@{breakPointName}-vtop {
                align-content: start;
            }

            &_@{breakPointName}-vcenter {
                align-content: center;
            }

            &_@{breakPointName}-vbottom {
                align-content: end;
            }

            &_@{breakPointName}-vbetween {
                align-content: space-between;
            }
        }
    }
}

.generate-f-grid(@iterationsNumber, @iteration: 0) when (@iteration =< @iterationsNumber) {
    .f-grid-@{iteration} {
        flex: 1 1 (@iteration / @gridSize) * 100%;
        max-width: (@iteration / @gridSize) * 100%;
    }

    .generate-f-grid(@iterationsNumber, (@iteration + 1));
}

Grid styles

Here are standard grid styles:

.generate-col(12, xs);
.generate-order(5, xs);

@media screen and (min-width: @breakPointXs) {
    .generate-col(12, sm);
    .generate-order(5, sm);
}

@media screen and (min-width: @breakPointSm) {
    .generate-col(12, md);
    .generate-order(5, md);
}

@media screen and (min-width: @breakPointMd) {
    .generate-col(12, lg);
    .generate-order(5, lg);
}

@media screen and (min-width: @breakPointLg) {
    .generate-col(12, xl);
    .generate-order(5, xl);
}

@media screen and (min-width: @breakPointXl) {
    .generate-col(12, xxl);
    .generate-order(5, xxl);
}

.f-row {
    width: 100%;
    display: flex;
    gap: @globalSpacing;
}

.generate-f-grid(12);

@media screen and (max-width: @breakPointSm) {
    .f-grid-1,
    .f-grid-2,
    .f-grid-3,
    .f-grid-4,
    .f-grid-5,
    .f-grid-6,
    .f-grid-7,
    .f-grid-8,
    .f-grid-9,
    .f-grid-10,
    .f-grid-11,
    .f-grid-12 {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

As well as standard grid row styles:

.grid {
    &__row {
        display: flex;
        flex-wrap: wrap;

        min-width: 100%;
        max-width: 100dvw;
        .pixel-to-rem(margin-left, -@gridGutter);
        .pixel-to-rem(margin-right, -@gridGutter);

        &_container-width {
            width: 100%;
            max-width: @gridContainerWidth;
            min-width: auto;
        }

        &_text-color {
            *:not(a, button, .btn, .js__grid-placeholder, .ribbon, .price__value_special) {
                color: var(--text-color);
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            [role='heading'] {
                color: var(--heading-color);
                *:not(a, button, .btn, .js__grid-placeholder, .ribbon, .price__value_special) {
                    color: var(--heading-color);
                }
            }

            .js__grid-placeholder,
            .js__grid-placeholder * {
                color: var(--a-neutral-900);
            }
        }
    }
}

.generate-row-alignments(@breakpointXsName);

@media screen and (min-width: @breakPointXs) {
    .generate-row-alignments(@breakpointSmName);
}

@media screen and (min-width: @breakPointSm) {
    .generate-row-alignments(@breakpointMdName);
}

@media screen and (min-width: @breakPointMd) {
    .generate-row-alignments(@breakpointLgName);
}

@media screen and (min-width: @breakPointLg) {
    .generate-row-alignments(@breakpointXlName);
}

@media screen and (min-width: @breakPointXl) {
    .generate-row-alignments(@breakpointXxlName);
}

And standard grid column styles.

.grid {
    &__col {
        display: grid;
        align-content: start;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr);

        .pixel-to-rem(padding-left, @gridGutter);
        .pixel-to-rem(padding-right, @gridGutter);

        &_text-color {
            *:not(a, button, .btn, .js__grid-placeholder, .ribbon, .price__value_special) {
                color: var(--text-color);
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            [role='heading'] {
                color: var(--heading-color);
                *:not(a, button, .btn, .js__grid-placeholder, .ribbon, .price__value_special) {
                    color: var(--heading-color);
                }
            }

            .js__grid-placeholder,
            .js__grid-placeholder * {
                color: var(--a-neutral-900);
            }
        }
    }
}

.generate-col-alignments(@breakpointXsName);

@media screen and (min-width: @breakPointXs) {
    .generate-col-alignments(@breakpointSmName);
}

@media screen and (min-width: @breakPointSm) {
    .generate-col-alignments(@breakpointMdName);
}

@media screen and (min-width: @breakPointMd) {
    .generate-col-alignments(@breakpointLgName);
}

@media screen and (min-width: @breakPointLg) {
    .generate-col-alignments(@breakpointXlName);
}

@media screen and (min-width: @breakPointXl) {
    .generate-col-alignments(@breakpointXxlName);
}