How do I create a two-column or three-column layout on the home page?

[sansubr]

I'm not a developer and I'm new to Hugo, but I've used it a bit and I've tried to create a layout with two-columns for the home page. But no matter what I do, the content gets stacked full-width and doesn't render as a column.

I used GitHub Copilot to help me create this columns.html that I have in my site under layouts/shortcodes/columns.html

`{{ $parts := split .Inner "" }}

{{ index $parts 0 | markdownify | safeHTML }}

{{ with (index $parts 1) }} {{ . | markdownify | safeHTML }} {{ end }}

{{/* This shortcode is used to create a two-column layout with a left and right column. The left column contains the content before the "" comment, and the right column contains the content after the "" comment. */}}`

and I use this in the _index.md

`{{< columns >}}
Left column content

Right column content
{{< /columns >}}`

And the content is stacked.

All I need is text on the left and image on the right or vice versa.

Any help is greatly appreciated!

[a64mahmo]

you can add custom.css in public css to do that something like this /* Layout */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: start;
}
.two-col > .col { min-width: 0; }

/* Wide main (left) variant */
.two-col.two-col--wide-left { grid-template-columns: 2fr 1fr; }

/* Image wrapper stacks image + buttons */
.img-wrap {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.img-wrap img { width: 100%; height: auto; display: block; border-radius: 6px; }

/* Button group below the image /
.button-group { display: flex; gap: 0.5rem; }
.btn {
display: inline-block;
padding: 0.45rem 0.9rem;
font-size: 0.95rem;
text-decoration: none;
border-radius: 6px;
border: 1px solid transparent;
cursor: pointer;
}
.btn--primary {
background-color: #0b74de; / adjust to your theme */
color: #fff;
border-color: #0b74de;
}
.btn--secondary {
background-color: transparent;
color: #0b74de;
border-color: #0b74de;
}

/* Responsive: stack on small screens */
@media (max-width: 720px) {
.two-col { grid-template-columns: 1fr; }
.two-col.two-col--reverse > .left { order: 2; }
.two-col.two-col--reverse > .right { order: 1; }
}

/* Small accessibility/focus styles */
.btn:focus { outline: 3px solid rgba(11,116,222,0.25); outline-offset: 2px; }
than use html in your .md to render it