Displaying Posts in Different columns

Question

Below is a code which gets blogs from the database and displays them in single column on screen, I want to display one or the first post in the first column which will have a bigger text and image than the rest, the second column to have two posts and the third final column having three posts.

A good example would be The New York Times website. How do i go about this?

<?php
  $query = "SELECT * FROM posts WHERE tag='us' ORDER BY updated_on DESC";
  $run_query = mysqli_query($conn, $query) or die(mysqli_error($conn));
  if (mysqli_num_rows($run_query) > 0) {
  while ($row = mysqli_fetch_assoc($run_query)) {
   $post_title = $row['title'];
   $post_id = $row['id'];
   $post_author = $row['author'];
   $post_date = $row['postdate'];
   $post_image = $row['image'];
   $post_content = $row['content'];
   $post_tags = $row['tag'];
   $post_status = $row['status'];
   if ($post_status !== 'published') {
    echo "NO POST PLS";
   } else {


?>

    <div class="img">
      <img src="allpostpics/<?php echo $post_image; ?>" alt="900 * 300"></a>
    </div>
    <h3 class="title" size="200" class="column">
      <b><span><a href="publicposts.php?post=<?php echo $post_id; ?>"><?php echo $post_title; ?></a></span> <br> <br></b>
      <span style="font-weight: normal;"><?php echo substr($post_content, 0, 200) . '.........'; ?> <br></span>
    </h3>

    <div class="details">
      <p>Posted on <?php echo $post_date; ?></p>
      <p>By <a href="#"><?php echo $post_author; ?></a></p>
    </div>


<?php }}}?>

It is a very bad idea to use `die(mysqli_error($conn));` in your code, because it could potentially leak sensitive information. See this post for more explanation: [mysqli or die, does it have to die?](https://stackoverflow.com/a/15320411/1839439) — Dharman, Jul 10 '21 at 14:48
Thank you for pointing out my mistake and i had no idea about it (new to programming). I'll rectify it, thanks. — Ethan Denis, Jul 10 '21 at 14:54
If you are only starting to learn PHP then you should learn PDO instead of mysqli. PDO is much easier and more suitable for beginners. Start here https://phpdelusions.net/pdo & https://websitebeaver.com/php-pdo-prepared-statements-to-prevent-sql-injection — Dharman, Jul 10 '21 at 15:07

score 0 · Answer 1 · answered Jul 10 '21 at 15:39

This is CSS only solution.

It takes 1 post in the first row and 2 posts in the second row, and 3 posts in rest of rows.

.post-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  gap: 30px;
  max-width: 600px;
  
}

.post {
   grid-column: span 6;
}

.post:nth-child(2),
.post:nth-child(3) { 
  grid-column: span 3;
}


.post:nth-child(n + 4) {
  grid-column: span 2;
} 

.post-wrapper .post img {
  max-width: 100%;
  display: block;
}

<div class="post-wrapper">
  <div class="post">
    <div class="img">
      <img src="https://via.placeholder.com/900X300" alt="900 * 300"></a>
    </div>
    <h3 class="title" size="200" class="column">
      <b><span><a href="publicposts.php?post=<?php echo $post_id; ?>">This is post Title</a></span> <br> <br></b>
      <span style="font-weight: normal;">Post Contents</span>
    </h3>

    <div class="details">
      <p>Posted on 10/07/2021</p>
      <p>By <a href="#">Author Name</a></p>
    </div>
  </div>
  
  <div class="post">
    <div class="img">
      <img src="https://via.placeholder.com/900X300" alt="900 * 300"></a>
    </div>
    <h3 class="title" size="200" class="column">
      <b><span><a href="publicposts.php?post=<?php echo $post_id; ?>">This is post Title</a></span> <br> <br></b>
      <span style="font-weight: normal;">Post Contents</span>
    </h3>

    <div class="details">
      <p>Posted on 10/07/2021</p>
      <p>By <a href="#">Author Name</a></p>
    </div>
  </div>

  <div class="post">
    <div class="img">
      <img src="https://via.placeholder.com/900X300" alt="900 * 300"></a>
    </div>
    <h3 class="title" size="200" class="column">
      <b><span><a href="publicposts.php?post=<?php echo $post_id; ?>">This is post Title</a></span> <br> <br></b>
      <span style="font-weight: normal;">Post Contents</span>
    </h3>

    <div class="details">
      <p>Posted on 10/07/2021</p>
      <p>By <a href="#">Author Name</a></p>
    </div>
  </div>

  <div class="post">
    <div class="img">
      <img src="https://via.placeholder.com/900X300" alt="900 * 300"></a>
    </div>
    <h3 class="title" size="200" class="column">
      <b><span><a href="publicposts.php?post=<?php echo $post_id; ?>">This is post Title</a></span> <br> <br></b>
      <span style="font-weight: normal;">Post Contents</span>
    </h3>

    <div class="details">
      <p>Posted on 10/07/2021</p>
      <p>By <a href="#">Author Name</a></p>
    </div>
  </div>

  <div class="post">
    <div class="img">
      <img src="https://via.placeholder.com/900X300" alt="900 * 300"></a>
    </div>
    <h3 class="title" size="200" class="column">
      <b><span><a href="publicposts.php?post=<?php echo $post_id; ?>">This is post Title</a></span> <br> <br></b>
      <span style="font-weight: normal;">Post Contents</span>
    </h3>

    <div class="details">
      <p>Posted on 10/07/2021</p>
      <p>By <a href="#">Author Name</a></p>
    </div>
  </div>

  <div class="post">
    <div class="img">
      <img src="https://via.placeholder.com/900X300" alt="900 * 300"></a>
    </div>
    <h3 class="title" size="200" class="column">
      <b><span><a href="publicposts.php?post=<?php echo $post_id; ?>">This is post Title</a></span> <br> <br></b>
      <span style="font-weight: normal;">Post Contents</span>
    </h3>

    <div class="details">
      <p>Posted on 10/07/2021</p>
      <p>By <a href="#">Author Name</a></p>
    </div>
  </div>

</div>

Displaying Posts in Different columns

1 Answers1