How to do a Flexible Grid?

Created on 7 February 2023, over 1 year ago
Updated 11 September 2023, 10 months 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.69.0 2024