Can I generate a flexbox grid with forloop?

Highlighted
New Member
3 0 0

I have a forloop counter attached to a linklist. The entire linklist is, say, 12 objects total, and I want to feature them via flexbox. When I try to implement flexbox inside a forloop, each flex item takes over the entire width of the element.

Here is the code -

 

{% for link in linklist.links %}
//capture & assign stuff

<div class="container"> <div class="flexbox-base">
<div class="flexbox-items">

{% if forloop.index <= 4 %} <div class=flexbox-bigitems> <a href= "{{ link_item.url }}"><img src="{{ link_image }}"></a> </div> {% else %} {% break %} {% endif %}

</div>
</div>
// insert stuff for the rest of the items in linklist which are similarly erratic
</div>

Ideally, for each iteration of the forloop, an item can be generated in the flexbox container and the flexbox will figure it out the gridding by itself. The first four items will be bigger, and the rest will grid-populate depending on number of items in the linklist. I haven't solved the first four yet.

At the moment, it's doing this:

firefox_g94ekSW5r0.png

(css simplified to as basic as possible)

 

Any idea how I can achieve grids? If I manually went in and populated the flexbox it works normally, but tying it to a linklist is much more flexible. Or is flexbox not the way to go?

 

0 Likes