如何在PHP中动态创建网格？

Question

I'm trying to create a mini-message board. I am using divs for each of the messages but I want to organise the divs in a grid. The grid should be flexible and responsive meaning that the number of columns and rows should dynamically change as the screen size does.

This is what I have done so far but it does not seem to work:

<div class="grid-container">

<?php
        while($row = $result->fetch_assoc() ){
            display($row['name'],$row['date'],$row['message']);
        }
}

function display($name, $date, $message){

    echo '<div class="flip-card grid-item">
  <div class="flip-card-inner">
    <div class="flip-card-front">
    <p class="message">'.$message.'</p>
    </div>
    <div class="flip-card-back">
      <h1 class="nameTitle"> '.$name.'</h1> 
      <p class="dateTitle">'.$date.'</p>
    </div>
  </div>
</div>';

}

?>

</div>

I know that the code for the displaying the information from the database works because the divs do appear. It's just they don't appear in a grid.

Thanks in advance for help!

Answer 1

I would recommend you FlexBox.

    .body{
        height: 100vh;
    }

    .column-wrapper {
        height: inherit;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
    }

    .column {
        background: tomato;
        padding: 5px;
        width: 200px;
        height: 150px;
        margin-top: 10px;
        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
    }

</style>

A simple example here: https://jsfiddle.net/04yxfwLg/1/

The trick is using justify-content to space-around

More on flexbox can be found on this amazing article.