Discussions » Development

SearX Multicolumn Styling

NotYouMod
§
Posted: 2022-11-20

Discussion for multicolumn search results solutions.

Current Solutions:

  • Solution 1
#main_results > .result {
    display: inline-block;
    width: calc(50% - .5em);
}

#urls .result {
    display: inline-block;
    width: calc(50% - 2.3rem);
}
  • Solution 2
:root {
    --amount-of-columns: 2; /* WRITE AMOUNT OF COLUMNS HERE */
}

#main_results > .result, #urls .result {
    display: inline-block;
}

#main_results > .result {
    width: calc(100% / var(--amount-of-columns) - .5em);
}

#urls .result {
    width: calc(100% / var(--amount-of-columns) - 2.5rem);
}
  • Solution 3 (Amount of auto = amount of columns)
.row > #main_results {
    display: grid;
    grid-template-columns: auto auto;
}

If you have any other solutions or thoughts about it, post them here.

Post reply

Sign in to post a reply.