Jump to content

How to display 3 column news layout

Recommended Posts

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(

                    $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) {
                        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>";


Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.