Grid

A simple way to create some grids into your layout.

@use '@natachah/vanilla-frontend/scss/components/grid';

There is two types of grid, the basic and the flexible. USe what is best for your design !

Syntax

Grid

You can create a basic grid via the .grid class.

html

<div class="grid" style="--grid-columns:8">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
    <div>...</div>
</div>

css properties

--grid-columns: 12;
--grid-gap-inline: 1rem;
--grid-gap-block: 1rem;
--grid-min-column-size: 0%;
--grid-min-columns: auto-fit;

Flex grid

You can create a flexible grid via the .flex-grid class.

html

<div class="flex-grid" style="--grid-columns:8; --grid-grow:0">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>...</div>
</div>

css properties

--grid-columns: 12;
--grid-gap-inline: 1rem;
--grid-gap-block: 1rem;
--grid-min-column-size: 0%;
--grid-min-columns: auto-fit;
--grid-grow: 1;

Responsive

There is multiple way to make them responsive, but a simple one is to change the CSS custom properties as:

--grid-columns: 6; // The maximum number of columns
--grid-min-column-size: 120px; // The minimum width of a column

Same thing for the Flex grid:

Columns

Offset

To make a column ossfet with .grid, change the properties --grid-min-columns to a fixed number, and add the properties grid-column-start and grid-column-end into the column.

<div class="grid" style="--grid-min-columns:4">
    <div>Grid 1</div>
    <div>Grid 2</div>
    <div style="grid-column-start: 4;grid-column-end: 5;">Offset</div>
</div>

But for .flex-grid you must calculate the percentage of the offset and set it as a margin-left. Or you can simply use the mixin flex-grid-offset-column() and pass as parameter the number of columns you want to offset (by default it's one);

html

<div class="flex-grid" style="--grid-columns:4">
    <div>Flex 1</div>
    <div>Flex 2</div>
    <div id="flexGridDemoOffset">Offset</div>
</div>

scss

@use '@natachah/vanilla-frontend/scss/abstracts/mixins' as *;

#flexGridDemoOffset {
    @include flex-grid-offset-column()
}

Width

To make a column wider with .grid, change the properties grid-column-start and grid-column-end of the column.

<div class="grid" style="--grid-columns:4">
    <div>Grid 1</div>
    <div>Grid 2</div>
    <div style="grid-column-start: 3;grid-column-end: 5;">Wider</div>
</div>

But for .flex-grid you must calculate the percentage of the width and set it as a flex-basis. Or you can simply use the mixin flex-grid-wider-column() and pass as parameter the number of columns you want to take (by default it's two).

html

<div class="flex-grid" style="--grid-columns:4">
    <div>Flex 1</div>
    <div>Flex 2</div>
    <div id="flexGridDemoWider">Wider</div>
</div>

scss

@use '@natachah/vanilla-frontend/scss/abstracts/mixins' as *;

#flexGridDemoWider {
    @include flex-grid-wider-column()
}