_grid

Intro

Ver. 0.1.1 (Alpha)

This partial contains mixins that can be used to make make simple and complex CSS grids while writing little code. Bellow is a list with a brief description of their basic functions.

_grid():
Is a mixin that sets up a grid with padding on the sides, and can also output different grid layouts using media quiries.
grid-items():
Is a mixin that outputs CSS code to help you add grid items to your grid.
grid-areas():
Is a mixin that works by outputing CSS code from a suplied list or map, that helps you add your grid items to their repective grid areas.
_sub-grid():
Is a more advanced/manual version of _grid(), where it has a wider range of CSS grid variable to call on and it does not employ padding on the sides.
sub-grid-items():
Is a mixin that may be deprecated and merged with grid-items(). It's functionality works like grid-items(), where it will output CSS code to help you add items to your grid.
sub-grid-areas():
Is a mixin that may be deprecated and merged with grid-area(), since they work almost the same. It works by outputing CSS code from a suplied list or map, that helps you add your grid items to their grid areas.

_grid

_grid() is a mixin that let users quickly build a CSS grid for their page. It does this by accepting an amount of rows and columns in a variety of different formats, letting the user build a simple or a complex layout. This simplifies and speeds up development, allowing the user to focus on content creation and design.

Code Examples

Using _grid() is fairly easy. The simplest usage is to supply it with the amount of rows and columns you want it to create, by using the variables $col-repeat and $row-repeat.

Sass


    .my-grid{ 
        @include _grid($col-repeat:2, $row-repeat:2);
    }

This creates a grid for for any container using the class .my-grid.

CSS


    /* .grid is added to all CSS files that use the partial _grid */
    .grid {
        height: var(--height, auto);
        width: var(--width, 100%);
        background: var(--bg, none);
        display: grid;
        grid-template-columns: var(--cols, 1fr);
        grid-template-rows: var(--rows, 1fr);
        grid-column-gap: var(--col-gap, 0);
        grid-row-gap: var(--row-gap, 0);
        grid-template-areas: var(--ga, "");
    }
    
    .my-grid {
        --height: auto;
        --width: 100%;
        --bg: none;
        justify-items: center;
        align-items: center;
        --col-gap: 0;
        --row-gap: 0;
        --cols: [grid-col-start] 20px [col-start] repeat(2, [col] 1fr) [col-end] 20px [grid-col-end];
        --rows: [grid-row-start] repeat(2, [row] 1fr) [grid-row-end];
        --grid-item-1: 1 / 2 / 2 / 3;
        --grid-item-2: 1 / 3 / 2 / 4;
        --grid-item-3: 2 / 2 / 3 / 3;
        --grid-item-4: 2 / 3 / 3 / 4;
    }

Next create a div (or a span) and add the two classes .grid and the class you created (in this case .my-grid). You'll still need to use the mixin grid-items() to make the classes you'll add to your grid items, but that's all there is to it.

HTML


    <div class="grid my-grid">
        
        <!-- Don't forget to use the mixin grid-items() to create classes for your items. -->

        <div class="grid-item-1"></div>
        <div class="grid-item-2"></div>
        <div class="grid-item-3"></div>
        <div class="grid-item-4"></div>

    </div>

Bellow is an example of the grid that was created from the above code, with the exception of the grid-items that were added to help show the details. As you can see we have four items (in yellow w/ a blue outline) and the padding on the side (in red). If you're on desktop try shrinking and growing the page, and see how it reacts.

Example

1

2

3

4

Advanced _grid

In this section, you'll learn how to create a more complex grid layout and how to make it resonsive.

Custom columns and rows

To make a custom grid, use the Sass variables $cols and $rows. In the example bellow, we'll be creating a grid that can hold six items. As you will see, this can be done with a variety of different value types mixed or not. Specifically any type that the CSS grid will work with.

Sass


    .my-other-grid{
        @include _grid($cols: 2fr 30px 50%, $rows: 1.2rem  50vh);
    }

If you compare the CSS variables bellow (--cols and --rows) to the CSS varialbes in .my-grid you can see how the code is different. This new grid now can hold three items on the top row and three on the bottom.

CSS


    .my-other-grid {
        --height: auto;
        --width: 100%;
        --bg: none;
        justify-items: center;
        align-items: center;
        --col-gap: 0;
        --row-gap: 0;
        --cols: [grid-col-start] 20px repeat(1, 2fr 30px 50%) 20px [grid-col-end];
        --rows: [grid-row-start] repeat(1, 1.2rem 50vh) [grid-row-end];
        --grid-item-1: 1 / 2 / 2 / 3;
        --grid-item-2: 1 / 3 / 2 / 4;
        --grid-item-3: 1 / 4 / 2 / 5;
        --grid-item-4: 2 / 2 / 3 / 3;
        --grid-item-5: 2 / 3 / 3 / 4;
        --grid-item-6: 2 / 4 / 3 / 5;
    }

To use it, we'll do the same as we did with .my-grid.

HTML


    <div class="grid my-other-grid">
        
    <!-- Don't forget to use the mixin grid-items() to create classes for your items. -->

        <div class="grid-item-1"></div>
        <div class="grid-item-2"></div>
        <div class="grid-item-3"></div>
        <div class="grid-item-4"></div>
        <div class="grid-item-5"></div>
        <div class="grid-item-6"></div>
    </div>

The bellow code is how it looks in practice. Again if you are on a desktop try resizing the page and see how it responds. You'll see how the middle column won't resize because we set it to a static size of 30px, while the other two will.

Example

1

2

3

4

5

6

Different Screen Sizes

Now keeping one layout for all screen sizes is usually bad practice, especially if the layout doesn't fit on mobile. So, in this section you'll learn how to create a more responsive layout that will change when resized.

So first we'll create a layout for mobile devices. Then we'll make another one for tablets. The new variable that we'll need is $tablet-threshold. This variable tells simplySass when to insert a media query and what's the min-width to set it to. Other than that the other variables that will be used are the same as before, but adding "$tablet-" before the variable name. This time we'll be creating a 8 item grid. For mobile it will be a single column with eight rows. The tablet screen will have two columns with four in each.

Sass


    .my-media-grid{
        @include _grid($col-repeat:1, $row-repeat:8,
        $tablet-threshold: 768px, $tablet-col-repeat: 2, $tablet-row-repeat: 4);
    }

The preceding code that's been outputed is quite a bit, but not much was needed to be written to create it.

CSS


    .my-media-grid {
        --height: auto;
        --width: 100%;
        --bg: none;
        justify-items: center;
        align-items: center;
        --col-gap: 0;
        --row-gap: 0;
        --cols: [grid-col-start] 20px [col-start] repeat(1, [col] 1fr) [col-end] 20px [grid-col-end];
        --rows: [grid-row-start] repeat(8, [row] 1fr) [grid-row-end];
        --grid-item-1: 1 / 2 / 2 / 3;
        --grid-item-2: 2 / 2 / 3 / 3;
        --grid-item-3: 3 / 2 / 4 / 3;
        --grid-item-4: 4 / 2 / 5 / 3;
        --grid-item-5: 5 / 2 / 6 / 3;
        --grid-item-6: 6 / 2 / 7 / 3;
        --grid-item-7: 7 / 2 / 8 / 3;
        --grid-item-8: 8 / 2 / 9 / 3;
    }

    @media screen and (min-width: 768px) {
        .my-media-grid {
            --cols: [grid-col-start] 15px [col-start] repeat(2, [col] 1fr) [col-end] 15px [grid-col-end];
            --rows: [grid-row-start] repeat(4, [row] 1fr) [grid-row-end];
            --grid-item-1: 1 / 2 / 2 / 3;
            --grid-item-2: 1 / 3 / 2 / 4;
            --grid-item-3: 2 / 2 / 3 / 3;
            --grid-item-4: 2 / 3 / 3 / 4;
            --grid-item-5: 3 / 2 / 4 / 3;
            --grid-item-6: 3 / 3 / 4 / 4;
            --grid-item-7: 4 / 2 / 5 / 3;
            --grid-item-8: 4 / 3 / 5 / 4;
        }
    }

Now add the class to the HTML code, in this case ".my-media-grid".

HTML


    <div class="grid my-media-grid">
        
    <!-- Don't forget to use the mixin grid-items() to create classes for your items. -->

        <div class="grid-item-1"></div>
        <div class="grid-item-2"></div>
        <div class="grid-item-3"></div>
        <div class="grid-item-4"></div>
        <div class="grid-item-5"></div>
        <div class="grid-item-6"></div>
        <div class="grid-item-7"></div>
        <div class="grid-item-8"></div>
    </div>

Bellow is an example of the eight item grid that grid that was created using the above code. Try resizing it, and you'll see how the items will move around once the threshold is reached.

Example

1

2

3

4

5

6

7

8

Creating Grid Areas

Maybe placing items by laying out areas is better for your design. In this section you'll learn how to use _grid() to create custom grid areas using the variable $grid-areas. While you can also make a complex layout using $cols and $rows with this, for this example we'll go with a more simple design and just use $col-repeat and $row-repeat.

Depenencies

You can create your own custom classes to work with this by using "grid-area" in your class. For this example we'll be using the mixin grid-item-areas() to create the classes we'll need.

Because of the padding that _grid() provides, in addition to using $grid-areas, we'll also need to use ($col-repeat and $row-repeat) and/or ($cols and $rows). For this example we'll use the varialbes with the repeat in their name.

Sass


    .my-grid-area{
        @include _grid($grid-areas: "top top" "side content" "footer footer",
                        $col-repeat: 2, $row-repeat:2);
    }

CSS


    .my-grid-area {
        --height: auto;
        --width: 100%;
        --bg: none;
        justify-items: center;
        align-items: center;
        --col-gap: 0;
        --row-gap: 0;
        --ga: ". top top ." ". side content ." ". footer footer ." ;
        --cols: [grid-col-start] 20px [col-start] repeat(2, [col] 1fr) [col-end] 20px [grid-col-end];
        --rows: [grid-row-start] repeat(3, [row] 1fr) [grid-row-end];
        --grid-item-1: 1 / 2 / 2 / 3;
        --grid-item-2: 1 / 3 / 2 / 4;
        --grid-item-3: 2 / 2 / 3 / 3;
        --grid-item-4: 2 / 3 / 3 / 4;
        --grid-item-5: 3 / 2 / 4 / 3;
        --grid-item-6: 3 / 3 / 4 / 4;
    }

HTML


    <div class="grid my-grid-area">

    <!-- Don't forget to use the mixin grid-item-areas() to create classes for your items. -->

        <div class="grid-item-area-top">top</div>
        <div class="grid-item-area-side">side</div>
        <div class="grid-item-area-content">content</div>
        <div class="grid-item-area-footer">footer</div>
    </div>

Example

top

side

content

grid-items

This mixin is used to create as many item classes that you'll need to put items into a grid. This is primarily used when not using grid areas to create and fill your grid.

Basic Use

For the basic use of grid-items(), it takes the number of the items that you wish to place into your grid.

Sass


    @include grid-items(4);

CSS


    .grid-item-1 {
        grid-area: var(--grid-item-1);
    }

    .grid-item-2 {
        grid-area: var(--grid-item-2);
    }

    .grid-item-3 {
        grid-area: var(--grid-item-3);
    }

    .grid-item-4 {
        grid-area: var(--grid-item-4);
    }

Next we add the class to our items. For demonstration purposes, the items will be out of order, but will be in order when displayed.

HTML


    <div class="grid my-grid">

        <div class="grid-item-3">3</div>
        <div class="grid-item-2">2</div>
        <div class="grid-item-4">4</div>
        <div class="grid-item-1">1</div>
    </div>

Example

3

2

4

1

Advanced Use

Let's say that you want a little more style to any grid items that you create. In the next example, we'll look at how to do that.

Sass


    @include grid-items(4){
        background: orange;
    };

By adding some brackets when calling this mixin, we're able to add a special touch to the look of our items. Bellow you can see how every grid-item has a background of orange.


    .grid-item-1 {
        grid-area: var(--grid-item-1);
        background: orange;
    }

    .grid-item-2 {
        grid-area: var(--grid-item-2);
        background: orange;
    }

    .grid-item-3 {
        grid-area: var(--grid-item-3);
        background: orange;
    }

    .grid-item-4 {
        grid-area: var(--grid-item-4);
        background: orange;
    }

Again we'll set up the grid as we did in the basic setup of this section.

HTML


    <div class="grid my-grid">

        <div class="grid-item-3">3</div>
        <div class="grid-item-2">2</div>
        <div class="grid-item-4">4</div>
        <div class="grid-item-1">1</div>
    </div>

Now instead of being yellow like in our other examples, we have four orange squares.

Example

3

2

4

1

grid-item-areas

This mixin is similar to grid-items() except you pass it a list or a map. The mixin will then generate classes with the name at the end of the class. You can then select it for your items by adding it to your items.

Using a List

Now for this example we'll be using the grid we created earlier when making a grid with areas in the _grid() section. Then, we'll create some grid-items-areas with the list "top side content footer".

Sass


    @include grid-item-areas(top side content footer);

This generates the bellow CSS classes.

CSS


    .grid-item-area-top {
        grid-area: top;
    }

    .grid-item-area-side {
        grid-area: side;
    }

    .grid-item-area-content {
        grid-area: content;
    }

    .grid-item-area-footer {
        grid-area: footer;
    }

Then add them to the items we want to be placed into those areas, and just for fun we'll scramble the order of them to show how they still go into their proper spots.

HTML


    <div class="grid my-grid-area">

        <div class="grid-item-area-content">content</div>
        <div class="grid-item-area-footer">footer</div>
        <div class="grid-item-area-top">top</div>
        <div class="grid-item-area-side">side</div>
    </div>

Example

content

top

side

Using Maps

Sometime you might want a different name to be added to your class, than the one that's provided. In this example, we'll create areas with a little more customizartion. Here we'll call on grid-item-areas and provide it with a map that has the format ("name": "area name").

Sass


    @include grid-item-areas(("nav": "top", "ad": "side", "con": "content", "foot": "footer"));

As you can see, the names of the classes don't match the name of the grid-area.

CSS


    .grid-item-area-nav {
        grid-area: top;
    }

    .grid-item-area-ad {
        grid-area: side;
    }

    .grid-item-area-con {
        grid-area: content;
    }

    .grid-item-area-foot {
        grid-area: footer;
    }

All that's left is to add them to the items in the grid. We don't even need to create a different grid layout. So, we'll call the one in the previous example.

HTML


    <div class="grid my-grid-area">

        <div class="grid-item-area-con">content</div>
        <div class="grid-item-area-foot">footer</div>
        <div class="grid-item-area-nav">top</div>
        <div class="grid-item-area-ad">side</div>
    </div>

Try checking the underlying CSS code.

Example

content

footer

top

side

_sub-grid

_sub-grid() is very similar to _grid(), as you can use all of the same variable names to the same effect. The main difference is that this mixin produces a grid without the side padding that _grid() does. As this has a lot more plans and changes coming, this section will be updated at a later time.

Ver. 0.1.1 (Alpha)

_grid():

grid-items():

grid-areas():

_sub-grid():

sub-grid-items():

sub-grid-areas():

Code Examples

Sass

CSS

HTML

Example

Custom columns and rows

Sass

CSS

HTML

Example

Different Screen Sizes

Sass

CSS

HTML

Example

Creating Grid Areas

Depenencies

Sass

CSS

HTML

Example

Basic Use

Sass

CSS

HTML

Example

Advanced Use

Sass

HTML

Example

Using a List

Sass

CSS

HTML

Example

Using Maps

Sass

CSS

HTML

Example