UpFront Theme: CSS Hacks

If you want to add a simple grid layout to a post list, for example on an archive page, there are two slightly different approaches. <strong>Option 1 — equal-width columns</strong> <pre><code class="language-css">li.uf-post.noFeature { flex: 1 1 calc(33.333% - 20px); min-width: 280px; box-sizing: border-box; } ul.uf-posts { display: flex; flex-wrap: wrap; gap: 30px; } </code></pre> This creates a classic responsive 3-column grid. The posts share the available space equally, while <code>min-width</code> allows them to wrap automatically on smaller screens. <strong>Option 2 — flexible cards with a maximum width</strong> <pre><code class="language-css">li.uf-post { min-width: 280px; box-sizing: border-box; display: inline-flex; flex-wrap: wrap; gap: 30px; max-width: 460px; } </code></pre> Here the individual posts behave more like flexible cards. They can grow up to <code>460px</code>, but they don't necessarily form equal-width columns. This gives you more control over the maximum card size and can be useful for layouts where you don't want the posts to stretch across the entire available width. So basically: <strong>the first approach is a true equal-column grid; the second is more of a flexible card layout. For specific Details see: <a href="https://psource.eimen.net/wiki/upfront-themes/upfront-theme-entwickler/nuetzliches-css-fuer-upfront-theme-entwickler/css-parameter-fuer-einfache-grid-layouts/">https://psource.eimen.net/wiki/upfront-themes/upfront-theme-entwickler/nuetzliches-css-fuer-upfront-theme-entwickler/css-parameter-fuer-einfache-grid-layouts/</a></strong> <hr> &nbsp;