Stack columns next to each other?

Hello,
I'm not sure how to corectly name title of this ticket, but I will try to describe it below. All I need is to know how to make multiple colums of text rows stacked to each other but not one on each other. Same as in https://foswiki.org/Tasks/WebHome stack of Search | Development | Index menu list. Same in https://foswiki.org/About/WebHome .I have found that is something to do with div classes. As this code belove is from Tasks page but if I try to use same code it doesn't work. I know I do missing something but maybe someone can can put me on the right way?

<div class="grid">
<div class="row">
<div class="col4">
---++ Search

dwd
dwd
dw </div>
<div class="col4 border">
---++ Development
dfe
qfq
f

</div>
<div class="col4 border">
---++ Reports & Statistics

fewfq
fwf
dw

</div></div></div>

My idea is to make bottom bar to display links lists

with maybe 4 or 6 columns and if browsing with mobile devices that columns woud stack on each other. Using as invisible table won't work and also this doesn work when usng separate tables. Hopefuly I'm clear enought here with my broken English? :)
Thank you in advance for the directions.

-- CieskaIzabelijus - 02 Feb 2020

Try GridLayoutPlugin

-- MichaelDaum - 03 Feb 2020

It does work. Thank you.

-- CieskaIzabelijus - 03 Feb 2020