Organize articles into two (or n) columns

[kevinlinxc]

My articles are listed like normal right now, except that I added some pictures:

I think it would look better if I moved this list into two columns instead, and centered all the text.

I tried adding the tailwind css grid keywords to create these columns. The reference is here: https://tailwindcss.com/docs/grid-template-rows.

To do so, I copied list.html to my layouts/_default and surrounded this chunk in a div:
https://github.com/jpanther/congo/blob/dev/layouts/_default/list.html#L29-L39.

Like so:

   <div class="!grid !grid-cols-2 gap-4">
      {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
        {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
          <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
            {{ .Key }}
          </h2>
          <hr class="border-dotted w-36 border-neutral-400" />
        {{ end }}
          {{ range .Pages }}
            {{ partial "article-link.html" . }}
          {{ end }}
      {{ end }}
    </div>

I also tried a few permutations, and overall, nothing seems to happen.

My hunch is that I have to "tell" tailwind CSS that I want to use grids in this project.
Another problem (I have minimal web dev design exp) could be that the text fills up the whole width, so there's not enough room to have two items in a column.

Could someone take me step by step through making this addition?

[kedarjoyner]

@kevinlinxc I had the same issue. I am trying to use md:flex-row in a custom.html override for my homepage, and using these responsive classes would not work. For the meantime, until we hear from the creators, I've injected the CDN of tailwind into the head file, and this class now works. The CDN is not supposed to be used in production, but my site is in progress, so I'm just using this solution in the interim until I figure out an alternative.

I did this by creating layouts/partials/extend-head.html and added:
<script src="https://cdn.tailwindcss.com"></script>

But the primary reason I chose Congo was to access Tailwind and learn Hugo at the same time, so this fix feels counterintuitive and not ideal. I just couldn't figure out how to do it any other way. So I'm not sure what I'll do long-term!

Would love to hear what the creators recommend 💕

[kedarjoyner]

@jpanther I'm really curious about your thoughts here!

[jpanther]

I suggest you read through the Advanced Customisation documentation as it explains how Tailwind is used in the theme. Including the entire library in the theme is exactly what you don't want to do as it's not performant and incurs large file downloads on every page load. The Tailwind CDN is not for production sites and it's for exactly this reason. As per their own docs, "The Play CDN is designed for development purposes only, and is not the best choice for production."

The type of customisation you're looking for would require you to rebuild the stylesheets as these Tailwind classes are currently not required in the theme and are therefore not available to you without building them into your project.

As for the actual request here to be able to display using columns, it is something I have thought about but not yet added to the theme. The challenge with adding so many different layouts is that the CSS inevitably grows larger and larger. I've seen forks of this project that have gone to the extreme of bolting on all sorts of Javascript and CSS and you can see how much less snappy the theme is overall when you do that.

[kedarjoyner]

@jpanther Thank you! I read through the Advanced Customization documentation, but couldn't figure out why those specific classes weren't included. In the meantime, I removed the CDN and just added a custom class that adds a mobile breakpoint. I added the CDN just to play around and see how it would work 🙃. I think the custom.css might just be enough for what I need <3