Add css to format table into grid

So in my php file, the groups are listed from top-bottom. I want to list them from left-right, and then like start the next row, so they are all in a grid format displayed nicely across the page. How can i add html/css to do this?

Object.keys(cats).forEach(function(Group) {
      let html = '';

      // Append the 'category' header

      html = '<tr>';
      html += '<td><h1>'+"Group"+ Group+'</h1></td>';
      html += '</tr>';
      $('table').append(html);


      // Loop through the results for this 'category'
      cats[Group].forEach(function(element) {

        var names = element.names;

        var img = "<img src=' " + randomImage+ " ' />";

        html = '<tr>';
        html += '<td><p>' + names + '</p></td> ';

        html += '<td><p>' + img + '</p></td>';
        html += '</tr>';
        $('table').append(html);

      });

    });

    });

    </script>

    </body>

    <table> </table>

from Add css to format table into grid