Does BSS support CSS Grid?

Does BSS support CSS Grid and if it does how do you use it with Bootstrap Grids? How do make CSS Grid responsive?

according to this update: https://bootstrapstudio.io/forums/topic/bootstrap-studio-4-0-0-is-out/

yes it does support CSS grid

@Chris I can't find where in BSS, can you point me to exact location please?

There are no drag/drop elements for CSS3 Grids i.e. the bootstrap framework doesn't have predefined CSS3 grid system like it does with flexbox and floats. You do the grids all in the CSS with normal HTML elements.

I setup a CSS3 Grid test bed project and I just published it if you would like to see how I did it. It's nothing stylish it's just a test bed site.

http://saj.bss.design/

Saj

@saj nice work and CSS Grid appears to be responsive or did you do something special to make it responsive?

What makes it responsive is that at certain media query break points, in the CSS I tell it to do something different.

When you view it in your browser and hit the F12 key on the top of your key board or right click on an element in the page and select Inspect Element, it will bring your browsers Dev Tools window where you can see that CSS that is applied to the site.

So you can see for example some media queries like the following.

@media (min-width: 576px) {
    .cssgrid-layout .grid {
        -ms-grid-columns:25% 1fr;
        -ms-grid-rows: (auto) [4];
        grid-template-areas: "title title" "header header" "sidebar content" "footer footer"
    }

    .cssgrid-layout .content {
        -ms-grid-column: 2;
        -ms-grid-column-span: 1
    }

    .cssgrid-layout .sidebar {
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row: 3
    }
}

@media (min-width: 768px) {
    .cssgrid-layout .grid {
        -ms-grid-columns:16.666667% 1fr;
        grid-template-columns: 16.666667% 1fr
    }

    .cssgrid-layout .content {
        -ms-grid-column: 2;
        grid-template-areas: "heading heading" "para1 para2"
    }
}

Saj

I would recommend this site in getting an good understanding on CSS3 Grid layout.

https://css-tricks.com/snippets/css/complete-guide-grid/

Saj

thanks @Saj you are indeed a valued member of these forums.