Show category slider as grid in homepage

renidev

How to show categories in grid? Any css tricks?

LuisMarcos

.secondary-slider-wrapper {
/* padding: 0 !important; */
display: grid;
grid-template-columns: repeat(4, 2fr);
gap: 8px;
width: 93%;
margin: 0 auto;
border-radius: 5px;
background-color: #ffffff;
}

renidev

LuisMarcos thanks bro... Can we create as 4 row 4 column as in image?

alabtechnosoft

LuisMarcos Where should i put this code to show categories as grid view as above screenshot?

deppu1347

.secondary-slider-wrapper {
/* padding: 0 !important; /
display: grid;
grid-template-columns: repeat(4, 4fr); /modified here*/
gap: 8px;
width: 93%;
margin: 0 auto;
border-radius: 5px;
background-color: #ffffff;
}

this will do the job

BharatSinghIN

deppu1347 not working

JithuP

not working even i also did the changes in the file and uploaded , then refreshed the site no changes found
any more changes we have to make please advise

Gopalkumar

JithuP go to setting >cache setting>> double click on both option

Force Clear Cache

Force New Settings

JithuP

Gopalkumar still the same, not working

alabtechnosoft

Dear All,

Can anyone help us to have category as GRID VIEW like below image, i checked most of the threads are not working properly as like 3 row X 3 Column. Thanks in advance!

animehouse

alabtechnosoft .secondary-slider-wrapper {
display: inline-grid;
grid-template-columns: repeat(4,2fr);
gap: 10px 5px;
width: 100%;
margin: 0 2px ;
margin-top: 5px;
margin-bottom: 3px;
border-radius: 5px;
justify-content:center;
background-color: white;
}

alabtechnosoft

animehouse getting below error!

animehouse

alabtechnosoft but it will work , watch your website is it working?

alabtechnosoft

animehouse Yeah its working fine, but alignment is not properly it cutting half of the category image.

animehouse

alabtechnosoft customize it with the pixels