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.

Option 1 — equal-width columns

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;
}

This creates a classic responsive 3-column grid. The posts share the available space equally, while min-width allows them to wrap automatically on smaller screens.

Option 2 — flexible cards with a maximum width

li.uf-post {
    min-width: 280px;
    box-sizing: border-box;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 460px;
}

Here the individual posts behave more like flexible cards. They can grow up to 460px, 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: the first approach is a true equal-column grid; the second is more of a flexible card layout. For specific Details see: https://psource.eimen.net/wiki/upfront-themes/upfront-theme-entwickler/nuetzliches-css-fuer-upfront-theme-entwickler/css-parameter-fuer-einfache-grid-layouts/