php How to display 3 column news layout

[afaaro]

I have 11 news then i want to display like

first column need only one news

second column need 5 news

third column need the rest of 5 news

I tried this but no luck, it shows first column and second column and the rest outside column

 

                    $rows = array(
                        'Title1',
                        'Title2',
                        'Title3',
                        'Title4',
                        'Title5',
                        'Title6',
                        'Title7',
                        'Title8',
                        'Title9',
                        'Title10',
                        'Title11',
                    );

                    $total_rows = count($rows);
                    $total_cols  = $total_rows - 1;// remove first one for the first column
                    $left_column = ceil($total_cols / 2);
                    $right_column = $total_cols - $left_column;

                    $i = 0;
                    foreach ($rows as $row) {
                        $i++;
                        if ($i == 1) {
                            $class = "primary_post";
                            echo "<div class='col-md-4 main'>";
                        } elseif ($i <= $left_column) {
                            $class = "other_post";
                            echo "<div class='col-md-4 left'>";
                        } elseif ($i == $right_column) {
                            $class = "other_post";
                            echo "<div class='col-md-4 right'>";
                        } else {
                            $class = "other_post";
                        }

                        echo "<div class='card {$class}'>$i</div>";
                        if ($i == 1 || $i == $left_column || $i == $right_column) {
                            echo "</div>";
                        } else {
                            echo "";
                        }
                    }
                    echo "</div>";

 

[maxxd]

I'd use CSS grid in this case.

[Strider64]

My opinion using grid and flex together would do the trick. Though you could even even accomplish with just flex, but it gets a little tricky if you have to change the number of columns. Though you can fix that problem using JavaScript.