search

jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
48.88k stars 3.93k forks source link

The grid add an additional size to the last element #3783

Open zkmark opened 3 months ago

zkmark commented 3 months ago

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 commented 3 months ago

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>

Screenshot 2024-04-16 at 11 40 02 PM

jpretak commented 2 months ago

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); }