How to stylize data from mysql in php file correctly?

September 28, 2022

I am working on a project using php and mysql.

I’m currently displaying data from a table, but I would like to stylize it.
I have difficulties doing so.

In the following code, at the end; the part for test is displaying how I want. But in the part where data are display, everything is on the same colomn. But I would like a result similar to the part test, were the columns are adjusting how many they are on a line depending of the size of screen thank to flexbox.
I guessing it’s because I’m trying to stylize it in a while.
But I don’t know how to to otherwise… Can someone got any ideas ?

//Part display data
while ($rows = $result-> fetch_assoc()) {
    ?>
    <div class="containerAdmin" style="display:flex; flex-wrap:wrap">
        <div class="box4test">
            <p>test</p>
            <h3><?php echo $rows['nom'];?></h3>
            <?php echo " | categorie: ";?>
            <?php echo $rows['categorie'];?>
            <button> x </button>
        </div>
    </div>
    <?php
}
?>
<!-- Part test for the display-->
<div class="containerAdmin" style="display:flex; flex-wrap:wrap">
    <div class="box4test">
        <p>1 </p>            
    </div>
    <div class="box4test">
        <p>2 </p>            
    </div>
    <div class="box4test">
        <p>3 </p>            
    </div>
    <div class="box4test">
        <p>4</p>            
    </div>
</div>

Here is the code for class box4test, in un .css file:

/*.containerAdmin{
    display: flex;
    flex-wrap: wrap;
}*/
.box4test {
    background-color: plum;
    margin: 10px;
    width: 300px;
    height: 50%;
}

>Solution :

you just add your loop inside containerAdmin div. please check below code.

<div class="containerAdmin" style="display:flex; flex-wrap:wrap">
<?php while ($rows = $result-> fetch_assoc()) { ?>
    <div class="box4test">
        <p>test</p>
        <h3><?php echo $rows['nom'];?></h3>
        <?php echo " | categorie: ";?>
        <?php echo $rows['categorie'];?>
        <button> x </button>
    </div>
<?php } ?>
</div>