Display Different Column Widths Depending Upon How May Posts

CMS & WordPress
1

I’d like to expand the way posts display in my template with the following idea:
“If there is only one post, display it full width of the screen;
if there are two posts, display each post at 50% width of the screen;
if there are three posts, display each post at 33.3333% width of the screen;
if there are four posts, display each post at 25% width of the screen.”

My current code looks like the following:

896×377 53 KB

How simple can this be accomplished?

2

One way would to be to get the entry count then using that to assign a CSS class, I don’t know what variable Wordpress uses but here’s an example:

Assign a clss with the count variable:

<div class="post{count}">
  content
</div>

So if there’s only one entry you get “post1”

<div class="post1">
  content
</div>

And if there’s two entries you get “post2”

<div class="post2">
  content
</div>
<div class="post2">
  content
</div>

You can then assign CSS rules for .post1, .post2 and so on.

4

I guess I should check to see how WP does it then. Because the thought is:

<div class="col-lg-12">if there is only one post
<div class="col-lg-6"> if there are two posts
<div class="col-lg-4"> if there are three posts