Add css grid component

Hello Mikey,

I understand the challenge presented by the layout issue. While a grid component isn’t directly available, we can achieve the desired layout by combining styleboxes.

It’s worth noting that even if a grid component were in place, it would essentially represent a structured arrangement of styleboxes.

To simplify the process, we offer ready-to-use Templates, particularly in your case those categorized under Page Layout. I recommend selecting the Two Columns template.

Here are the steps:

  1. Go to Templates, click the Page Layout category, and drag and drop the Two Columns template onto your canvas.
  2. Once chosen, set its width to 100% and height to 80% of the canvas.
  3. You can then easily adjust the columns within to fit your needs, such as setting the first column width to 80% and the second column to 20%. For heights, both would take 100% of the parent stylebox.
  4. Lastly, add another stylebox underneath it with a width of 100% and a height of 20% of the canvas.

And you would get this layout:

Now, for your next inquiry regarding button alignments between the two main boxes:

  1. Delete the bottom box.
  2. Duplicate the first box created from the template.
  3. Change its height to 20% of the canvas.
  4. It will now contain only one button, aligning well with the buttons from the top box.

And you would get this layout:

Best regards,

1 Like