How to do a Flexible Grid?

Created on 7 February 2023, almost 2 years ago
Updated 11 September 2023, about 1 year ago

Problem/Motivation

I would like a layout for my editors that is a flexible grid like https://getbootstrap.com/docs/5.2/components/card/#grid-cards, I tried the single 1 column, and added (row row-cols-1 row-cols-md-2 g-4) and "disabled" the col. But the individual elements need to be wrapped in .col in order for the bootstrap grid to work properly.

Is there a way to somehow use a hook somehow to wrap the {{ content }} in cols?

With those settings my markup is like and all that missing is somehow to wrap the cols around each content

<!-- BEGIN OUTPUT from 'modules/contrib/easy_layouts/templates/layouts/columns_1/easy-layouts-columns-1.html.twig' -->
<div class="row row-cols-1 row-cols-md-2 g-4">

<!-- BEGIN OUTPUT from 'themes/custom/cotstyle/templates/paragraphs/paragraph--card.html.twig' -->
<div class="card normal">
</div>
<!-- END OUTPUT from 'themes/custom/cotstyle/templates/paragraphs/paragraph--card.html.twig' -->

<!-- BEGIN OUTPUT from 'themes/custom/cotstyle/templates/paragraphs/paragraph--card.html.twig' -->
<div class="card normal">
</div>
<!-- END OUTPUT from 'themes/custom/cotstyle/templates/paragraphs/paragraph--card.html.twig' -->

</div>
<!-- END OUTPUT from 'modules/contrib/easy_layouts/templates/layouts/columns_1/easy-layouts-columns-1.html.twig' -->

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

✨ Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇺🇸United States NicholasS

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024