Preview

Grid: 4 Col

Ready

Docs
HTML
Assets

Establishes a grid using display:grid. Uses a float fallback for less capable browsers.

No row height is set: it depends on the content.

Grid columns

By default, the .grid class doesn’t apply any columns (this is needed for responsive design). Modifier classes can change this. You get as many modifier classes as $max-grid-cols (set it to false to avoid generating any markup).

The scheme is as follows: $grid--#{N}col, being N the number of columns needed.

Responsive

Note that you will need to activate the fullscreen preview to see the breakpoints working properly

Inestad of setting a grid, you can use a set of helper classes to define the specific number of columns on every breakpoint.

The pattern is as follows: .grid--[breakpoint]--[number]col. So, a 11-col grid from $medium breakpoint up would be $grid--medium--11col (provided you have as many columns!)

We follow the mobile-first approach to responsive web design, so you will need to stack your classes understanding that no max-width constraint is set and every breakpoint will be active until a larger breakpoint weighs in.

Gutterless grid

Modifier class $grid--gutterless removes all gutter from the grid.

Example




<section class="grid grid--4col">
    <div class="p grid-item bg-base-primary">Grid item</div>
    <div class="p grid-item bg-base-secondary">Grid item</div>
    <div class="p grid-item bg-base-separator">Grid item</div>
    <div class="p grid-item bg-text-primary">Grid item</div>
    <div class="p grid-item bg-text-mark">Grid item</div>
    <div class="p grid-item bg-state-muted">Grid item</div>
    <div class="p grid-item bg-state-success">Grid item</div>
    <div class="p grid-item bg-state-warning">Grid item</div>
    <div class="p grid-item bg-state-error">Grid item</div>
</section>

Assets

Filesystem Path: src/components/layout/grid/_grid.scss
Size: 1.9 KB


                                .grid {
    @include clearfix();
    .grid-item {
        float:left;
        margin-bottom: $spacer;
    }
}

@if $max-grid-cols {
    @for $i from 2 through $max-grid-cols {
        .grid--#{$i}col {
            .grid-item {
                width: (100% / #{$i});
                width: calc( (100% / #{$i}) -  ( ( #{$spacer} * ( #{$i} - 1 ) / #{$i} ) + 0.001rem ) );
                margin-right:$spacer;
                &:nth-child(#{$i}n) {
                    margin-right:0;
                }
            }
        }
    }

    @each $point, $value in $breakpoints {
        @for $i from 2 through $max-grid-cols {
            .grid--#{$point}--#{$i}col {
                @include breakpoint($value) {
                    .grid-item {
                        width: (100% / #{$i});
                        width: calc( (100% / #{$i}) -  ( ( #{$spacer} * ( #{$i} - 1 ) / #{$i} ) + 0.001rem ) );
                        margin-right:$spacer;
                        &:nth-child(#{$i}n) {
                            margin-right:0;
                        }
                    }
                }
            }
        }
    }
}


@supports(display:grid) {
    .grid {
        display:grid;
        grid-gap: $spacer;
        &:before,
        &:after {
            display:none;
        }
        .grid-item {
            float:none;
            margin:0;
            width:auto;
        }
    }

    @for $i from 2 through $max-grid-cols {
        .grid--#{$i}col {
            grid-template-columns: repeat( #{$i} , 1fr);
        }
    }

    @each $point, $value in $breakpoints {
        @for $i from 2 through $max-grid-cols {
            .grid--#{$point}--#{$i}col {
                @include breakpoint($value) {
                    grid-template-columns: repeat( #{$i} , 1fr);
                }
            }
        }
    }
}


.grid--gutterless {
    grid-gap: 0;
}