How to have multiple square columns with content (flex, with Bulma)

I want to display a variable number of elements with content in perfect circles, well aligned. For that I use Bulma and its columns and box, like this:

<div class="columns is-centered is-vcentered is-8 is-variable">
  <div class="column is-2">
    <div class="box has-text-centered">
       A
    </div>
  </div>
  <div class="column is-2">
    <div class="box has-text-centered">
       B
       more text in this element
     </div>
  </div>
</div>

Making the boxes round is easy

.box {
  border-radius: 50% 50%;
}

.box::after {
  content: "";
  display: block;
  padding-bottom: 84.4%;
}

And the ::after Element trick seems to be the way to go to achieve square elements of relative size (I had to use 83.4% because a .column.is-2 is roughly 16.6% wide). However, as soon as the boxes receive content, the squariness is lost.

I tried other ::before and ::after tricks (e.g. with display:table) to no avail. I also tried to set the position of the after element absolutely.

How can I make the columns (or probably rather the boxes?) square?

Fiddle at: https://jsfiddle.net/2tukdp8w/

Of course it would be great if all Bulma-comfort (responsiveness, column-gaps, ...) would be preserved.

Solution

You might want a list - or maybe not, depending on the meaning of the content. I appreciate that you are trying to use less elements and instead a pseudo element, but consider a custom-element as a way to 'not use' an unsemantic 'div' or something - and win in both ways.

<ul class="thing-list">
  <li class="thing">
    <circle-component>
      <span>Text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
</ul>

From there - there are many ways to do this. You could use the height: 0; padding-bottom: 50%; type trick, but it might cause you more trouble than being squishy is worth in this case.

Here is the setup for using flex-box / and also a grid alternative. Don't be afraid to use custom-elements! They are easy to read - and well, it's 2020! : )

I'm sure that Bulma has some neat conventions, but in this case I see no reason to use any framework. CSS in 2020 provides us a really lovely set of options.

/* reset + project setup */
* {
  box-sizing: border-box; /* look this up if you don't already use it https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
}


/* components FIRST */
circle-component {
  display: block; /* custom components are inline by default */
  width: 120px;
  /* one of the few places I would EVER set an explicit height or width */
  height: 120px; 
  border-radius: 50%;
  border: 1px solid red;
  display: flex;
  flex-direction: column; /* one way to do that... (center) */
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}


/* then... context */
.thing-list {
  display: flex; /* flex version */
  flex-direction: row;
  flex-wrap: wrap; /* let it break to the next line */
}

.thing-list.grid-version {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* depends on what you want to happen */
  border: 1px solid blue;
}

.thing-list .thing {
  padding: 10px; /* maybe */
}



/* you could totally use position absolute for the text if you want - but it's nice to not need that - and let the text flow naturally */

fiddle: https://jsfiddle.net/sheriffderek/Lbjcw8gp/

A few thoughts on flex-box patterns to help solidify them: Almost all of the UI layout comes down to just this