# betterdocs/4.9.5/react-src/scss/common/_grid.scss

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot, version 4.9.5. 120 lines.

- Page: https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/scss/common/_grid.scss
- Raw: https://pluginprobe.com/plugins/betterdocs/4.9.5/raw/react-src/scss/common/_grid.scss
- Modified: 2026-10-12T10:07:14+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/scss/common/_grid.scss#L10-L20`.

```scss
// CHECKED:
@import "./mixins";

.layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap, 15) * 1px);
	@include for(".betterdocs-category-grid-three-wrapper") {
		@include if(".betterdocs-category-grid-inner-wrapper", ".layout-3") {
			display: grid;
			gap: calc(var(--gap, 48) * 1px);
			.betterdocs-single-category-wrapper {
				margin-top: 10px;
				margin-bottom: 10px;
			}
		}
	}
    // row-gap: 30px;
    // column-gap: 30px;
    @for $i from 1 through 12 {
        &.docs-col-#{$i},
        &.betterdocs-column-#{$i} {
            grid-template-columns: repeat(#{$i}, 1fr);
            @include responsive-below("small-laptop") {
                @if ($i >= 3) {
                    grid-template-columns: repeat(3, 1fr);
                } @else {
                    grid-template-columns: repeat(#{$i}, 1fr);
                }
            }
            @include responsive("tablet") {
                @if ($i >= 2) {
                    grid-template-columns: repeat(2, 1fr);
                } @else {
                    grid-template-columns: repeat(#{$i}, 1fr);
                }
            }
            @include responsive("phone") {
                grid-template-columns: 1fr;
            }
        }
    }
}
.masonry {
    @for $i from 1 through 12 {
        &.docs-col-#{$i},
        &.betterdocs-column-#{$i} {
            .betterdocs-single-category-wrapper {
                @include responsive-below("small-laptop") {
                    @if ($i >= 3) {
                        width: 30% !important;
                        margin-left: 10px;
                        margin-right: 10px;
                    }
                }
                @include responsive("tablet") {
                    @if ($i >= 3) {
                        width: 45% !important;
                        margin-left: 15px;
                        margin-right: 15px;
                    }
                }
                @include responsive("phone") {
                    width: 100% !important;
                    margin: 0px;
                }
            }
        }
    }
}

.betterdocs-single-category-wrapper {
    flex: 1 0 calc((100% / var(--column, 3)) - (var(--gap, 15) * 1px));
}

@media only screen and (min-width: 1025px) {
    .betterdocs-blocks-grid {
        display: grid;
        @for $i from 1 through 6 {
            .betterdocs-column-desktop-#{$i} {
                grid-template-columns: repeat(#{$i}, 1fr);
            }
        }
    }
}

@media only screen and (max-width: 1024px) and (min-width: 766px) {
    .betterdocs-blocks-grid {
        display: grid;
        @for $i from 1 through 6 {
            .betterdocs-column-tab-#{$i} {
                grid-template-columns: repeat(#{$i}, 1fr);
            }
        }
    }
}

@media only screen and (max-width: 767px) {
    .betterdocs-blocks-grid {
        display: grid;
        @for $i from 1 through 6 {
            .betterdocs-column-mobile-#{$i} {
                grid-template-columns: repeat(#{$i}, 1fr);
            }
        }
    }
    .betterdocs-single-category-wrapper {
        flex: 1 0 calc((100% / 2) - (var(--gap, 15) * 1px));
    }
    .betterdocs-category-grid-wrapper .betterdocs-single-category-wrapper {
        flex: 1 0 calc((100% / 1) - (var(--gap, 15) * 1px));
    }
}

@media only screen and (max-width: 500px) {
    .betterdocs-single-category-wrapper {
        flex: 1 0 calc((100% / 1) - (var(--gap, 15) * 1px));
    }
}

```