Algolia InstantSearch Show Result as Row Not Grid (Vue.js)

August 19, 2020

If you are using instantsearch.css/themes/algolia-min.css, the default result is shown as grid/box.

To change it to row, change the CSS.

/* change search result from grid/box to row */
.ais-Hits-item {
  width: 100%;
  border: none;
  box-shadow: none;


NOTE: Refer to Setup Algolia InstantSearch on Nuxt/Vue for complete code.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.