folderweb/app/default/templates/list-grid.php

<?php if (!empty($pageContent)): ?>
<div class="list-intro">
	<?= $pageContent ?>
</div>
<?php endif; ?>

<div class="grid">
	<?php foreach ($items as $item): ?>
	<article class="card">
		<?php if (!empty($item['cover'])): ?>
		<img src="<?= htmlspecialchars($item['cover']) ?>" alt="">
		<?php endif; ?>
		
		<h3><a href="<?= htmlspecialchars($item['url']) ?>"><?= htmlspecialchars($item['title']) ?></a></h3>
		
		<?php if (($metadata['show_date'] ?? true) && !empty($item['date'])): ?>
		<time><?= htmlspecialchars($item['date']) ?></time>
		<?php endif; ?>
		
		<?php if (!empty($item['summary'])): ?>
		<p><?= htmlspecialchars($item['summary']) ?></p>
		<?php endif; ?>
	</article>
	<?php endforeach; ?>
</div>

<style>
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--space-m);
}

.card {
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
	padding: var(--space-s);
	
	& img {
		margin-block-end: var(--space-s);
		border-radius: 0.25rem;
	}
	
	& h3 {
		margin-block-start: 0;
	}
}
</style>