Cards look like this

I’m having a hard time displaying data in a column based fashion. I am using PHP and CSS.

This is my php code:

<?php 

    include '../DBConnector.php';

    $menuQuery = "SELECT * FROM menu";
    $menuResult = $conn->query($menuQuery);

    if ($menuResult->num_rows > 0) {

    
        while ($row = $menuResult->fetch_assoc()) {

            echo "<link rel='stylesheet' href='../css/cards.css'> ";
            echo "<link rel='stylesheet' href='../css/style.css'>";
            echo "<link rel='stylesheet' href='../css/buttons.css'>";

            echo "<div class='cards-container'>";
                echo "<div class ='cards'>";
                    echo "<img class = 'center' src = '" . $row['food_image'] . "' alt = ' " .$row['food_name'] . " '";
                    echo "<div class = 'container'>";
                        echo "<h4><b>" . $row['food_name'] . "</h4><b>";
                        echo "<form action = 'food-view.php' method='post'> 
                            <button type='submit'> Order </button>
                        </form>"; 
                    echo "</div>";                    
                echo "</div>";
            echo "</div>";
        }


    }

?>

and this is my css for the cards:

.cards-container{
    position: relative;
    top: 25px;
}

.cards {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: auto;
    width: 300px;
    border-radius: 5px;
    text-align: center;

}

.cards:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
    float: left;
}

.container h4{
    margin: 0;
}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;

}


table{
    width: 100%;
}

img {
    border-radius: 5px 5px 0 0;
    object-fit: cover;
    width: 100px;
    height: 100px;
    
}

I tried finding similar questions in this platform, unfortunately, I haven’t found any results. Should I use a table? Or do any of you have some insights to what I should do?