The grid add an additional size to the last element

[zkmark]

This is about Bulma.
It's a bug or design issue/discussion.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version 1.0.0
My browser is: Chrome

I am sure this issue is not a duplicate? Yes

Description

When I use cards with cell inside the grid, the last card has an extra size, and they should all have the same height

Steps to Reproduce

Codepen Example
https://codepen.io/zkmark/pen/JjVZoNB

Code example

<section class="section">
	<div class="container">

		<div class="fixed-grid has-4-cols">
			<div class="grid is-gap-3">

				<article class="cell card">
				  <div class="card-image">
				    <figure class="image is-4by3">
				      <img
				        src="https://bulma.io/assets/images/placeholders/1280x960.png"
				        alt="Placeholder image"
				      />
				    </figure>
				  </div>
				  <div class="card-content">
				    <div class="media">
				      <div class="media-left">
				        <figure class="image is-48x48">
				          <img
				            src="https://bulma.io/assets/images/placeholders/96x96.png"
				            alt="Placeholder image"
				          />
				        </figure>
				      </div>
				      <div class="media-content">
				        <p class="title is-4">John Smith</p>
				        <p class="subtitle is-6">@johnsmith</p>
				      </div>
				    </div>

				    <div class="content">
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
				      iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
				      <a href="#">#responsive</a>
				      <br />
				      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
				    </div>
				  </div>
				</article>

				<article class="cell card">
				  <div class="card-image">
				    <figure class="image is-4by3">
				      <img
				        src="https://bulma.io/assets/images/placeholders/1280x960.png"
				        alt="Placeholder image"
				      />
				    </figure>
				  </div>
				  <div class="card-content">
				    <div class="media">
				      <div class="media-left">
				        <figure class="image is-48x48">
				          <img
				            src="https://bulma.io/assets/images/placeholders/96x96.png"
				            alt="Placeholder image"
				          />
				        </figure>
				      </div>
				      <div class="media-content">
				        <p class="title is-4">John Smith</p>
				        <p class="subtitle is-6">@johnsmith</p>
				      </div>
				    </div>

				    <div class="content">
				      Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus nec
				      iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
				      <a href="#">#responsive</a>
				      <br />
				      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
				    </div>
				  </div>
				</article>

				<article class="cell card">
				  <div class="card-image">
				    <figure class="image is-4by3">
				      <img
				        src="https://bulma.io/assets/images/placeholders/1280x960.png"
				        alt="Placeholder image"
				      />
				    </figure>
				  </div>
				  <div class="card-content">
				    <div class="media">
				      <div class="media-left">
				        <figure class="image is-48x48">
				          <img
				            src="https://bulma.io/assets/images/placeholders/96x96.png"
				            alt="Placeholder image"
				          />
				        </figure>
				      </div>
				      <div class="media-content">
				        <p class="title is-4">John Smith</p>
				        <p class="subtitle is-6">@johnsmith</p>
				      </div>
				    </div>

				    <div class="content">
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
				      iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
				      <a href="#">#responsive</a>
				      <br />
				      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
				    </div>
				  </div>
				</article>

				<article class="cell card">
				  <div class="card-image">
				    <figure class="image is-4by3">
				      <img
				        src="https://bulma.io/assets/images/placeholders/1280x960.png"
				        alt="Placeholder image"
				      />
				    </figure>
				  </div>
				  <div class="card-content">
				    <div class="media">
				      <div class="media-left">
				        <figure class="image is-48x48">
				          <img
				            src="https://bulma.io/assets/images/placeholders/96x96.png"
				            alt="Placeholder image"
				          />
				        </figure>
				      </div>
				      <div class="media-content">
				        <p class="title is-4">John Smith</p>
				        <p class="subtitle is-6">@johnsmith</p>
				      </div>
				    </div>

				    <div class="content">
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
				      iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
				      <a href="#">#responsive</a>
				      <br />
				      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
				    </div>
				  </div>
				</article>
  		</div>
		</div>
		
	</div>
</section>

Expected behavior

All cards should have the same height within the grid

Actual behavior

The last card has a larger height

[JimCook57]

Also has this problem when using grid with cell box classes.

<div class="grid">
<div class="cell box">
Normal Size
</div>
<div class="cell box">
Normal Size
</div>
<div class="cell box">
Extra row in box
</div>
</div>

[jpretak]

Look into this style declaration:
.card:not(:last-child){ margin-bottom: var(--bulma-block-spacing); }

So every card except that last one has a bottom margin within the grid (or whatever block element) so they are being shortened, not the other way around.

You can fix this by adding the following line of css:

.grid .card:last-child{
margin-bottom: var(--bulma-block-spacing);
}