Riode - Ultimate eCommerce Template

Products Creative Layout

We provide products layout that makes your site more beautiful and attractive. Please enjoy our creative layout.

                                .grid-type {
                                    display: grid;
                                    grid-template-columns: repeat(auto-fill,calc(100% / 4));
                                    .grid-item {
                                        grid-row-end: span 1;
                                        grid-column-end: span 1;
                                    &.grid-height-2 {
                                        grid-row-end: span 2;
                                        grid-column-end: span 2;
                                    }
                                }
                                @include mq(lg, max) {
                                    .grid-type {
                                        grid-template-columns: repeat(auto-fill,calc(100% / 2));
                                    }
                                }

XBox Gaming Pad

$19.00

Kinova Smart Phone 7 inchi

$199.99~~$210.00~~

IP Camera

$34.00

IP Camera 16x

$58.00

Bluetooth Headphone

$19.00

Show Code

Other Type

                                .grid-type-other {
                                    display: grid;
                                    grid-template-columns: repeat(auto-fill,calc(100% / 4));
                                    grid-template-rows: repeat(auto-fill,calc(100% / 3));
                                    .height-x3 { 
                                        grid-row-end: span 3;
                                        grid-column-end: span 1;
                                    }
                                    @include mq(xl, max) {
                                        grid-template-columns: repeat(auto-fill,calc(100% / 3));
                                    }
                                    @include mq('800px', max) {
                                        grid-template-columns: repeat(auto-fill,calc(100% / 2));
                                        grid-template-rows: repeat(auto-fill,calc(100% / 5));
                                    }
                                    @include mq(sm, max) {
                                        grid-template-columns: repeat(auto-fill,calc(100% / 1));
                                    }
                                }