afaaro 0 Posted December 31, 2020 Share Posted December 31, 2020 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>"; Quote Link to post Share on other sites
maxxd 101 Posted December 31, 2020 Share Posted December 31, 2020 I'd use CSS grid in this case. Quote Link to post Share on other sites
Strider64 19 Posted January 1 Share Posted January 1 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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.