How to customize search result

I want the search result to be in this grid format

but when my algolia search result only shows up in this format

this is my code

var search = instantsearch({
// Replace with your own values
appId: ‘E434344’,
apiKey: ‘xxxxxxxxxxxx’,
indexName: ‘Listing’,
urlSync: true,
searchParameters: {
query: “2”,
// hitsPerPage: 10
}
});

         search.addWidget(
           instantsearch.widgets.hits({
            container: '#hits',
            templates: {
              empty: 'No results',
              item: `

                            <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-pic hov-img0">
                        <img src="images/product-03.jpg" alt="IMG-PRODUCT">

                        <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                            Quick View
                        </a>
                    </div>

                    <div class="block2-txt flex-w flex-t p-t-14">
                        <div class="block2-txt-child1 flex-col-l ">
                            <a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                Only Check Trouser
                            </a>

                            <span class="stext-105 cl3">
                                $25.50
                            </span>
                        </div>

                        <div class="block2-txt-child2 flex-r p-t-3">
                            <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
                                 
              `
              ,

               }
              })
            );



          search.start();

The search result over rule the css and display in list format instead of column

how can I customize the result to get the desired display?

Hi,

You can solve this issue with CSS. For the grid format that you’re trying to achieve, I would probably use Flexbox. Here’s a great guide to get started: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In your case, you would need to set display: flex on the direct parent of your items, and set flex-wrap: wrap so it automatically wraps and pushes the items on the next line when exceeding the viewport width. Then, you would need to play around with the flex-basis, flex-grow and flex-shrink CSS properties on the items to define how many items you have per line.

Have a nice day!

this is the html container

<div class="row isotope-grid" id="hits">
	 
				 

		<!-- Load more -->
		<div class="flex-c-m flex-w w-full p-t-45">
			<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
				Load More
			</a>
		</div>
	</div>

The CSS is fine . It works perfectly if the html div class is posted directly in the html container container with id hits (I just added it below). But the div is product in JS through algolia, it overides the css and only list the div like image 2 instead of image 1.