Cant get grid system to work

joshdev99
Member

Basically what I want to do is make a dnd section where it displays 3 cards. HOWEVER , this error pops up line 29: Invalid argument in 'dnd_module': dnd_area-module-3 spanning columns 1 to 12 overlaps with dnd_area-module-2 spanning columns 1 to 12. 

 

my source code: 

    {% dnd_section "posts"
      background_color={
        r: 248,
        g: 250,
        b: 252,
        a: 1
      }
    %}
      {% dnd_column width=12 %}
        {% dnd_row %}
            {% dnd_module path="../modules/post-card.module" %}
            {% end_dnd_module %}
            {% dnd_module path="../modules/post-card.module" %}
            {% end_dnd_module %}
            {% dnd_module path="../modules/post-card.module" %}
            {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}  
    {% end_dnd_section %}

 

0 Upvotes
2 Replies 2
piersg
Key Advisor

I think you need to specify the width and offset attributes to the modules in the row:

{% dnd_module path="../modules/post-card.module",
  offset=0,
  width=4,
%}
{% end_dnd_module %}
{% dnd_module path="../modules/post-card.module",
  offset=4,
  width=4,
%}
{% end_dnd_module %}
{% dnd_module path="../modules/post-card.module",
  offset=8,
  width=4,
%}
{% end_dnd_module %}

 

webdew
Top Contributor | Diamond Partner

Hi @joshdev99 ,


Please replace your code with below code:
{% dnd_section
background_color={
r: 248,
g: 250,
b: 252,
a: 1
}
%}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path="../modules/post-card.module",
offset=0,
width=4
%}
{% end_dnd_module %}

{% dnd_module path="../modules/post-card.module",
offset=4,
width=4
%}
{% end_dnd_module %}

{% dnd_module path="../modules/post-card.module",
offset=8,
width=4
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.