Colonne CSS

Bonjour, j'ai actuellement un rangement de ma liste sur 3 colonnes (ou 2 suivant la largeur dispo) mais avec une lecture de gauche à droite sur les 3 colonnes (https://www.galerieduverre.com/artistes/) et je voudrais que ce soit rangé par colonne (lecture de haut en bas).
Comment faire pour changer cela ? Je pense que le souci vient du fait qu'il a été codé avec "grid" et non "column" mais après de nombreux essai impossible à changer...

<?php

$artistes = get_posts( [
    'post_type'   => 'artistes',
    'orderby'     => 'title',
    'order'       => 'ASC',
    'numberposts' => 999,
] );

?>

<section class="py-10">
  <div class="container">

    <h1 class="mb-8 text-32px font-light"><?= get_the_title() ?></h1>

    <div class="grid sm:grid-cols-2 lg:grid-cols-3">
      <?php foreach ( $artistes as $post ) : setup_postdata( $post ); ?>
        <a href="<?= get_artist_permalink(get_permalink( $post->ID )) ?>" class="hover:underline">
          <?php the_field( 'prenom' ) ?>
          <?php the_title(); ?>
        </a>
      <?php endforeach; ?>
          <?php wp_reset_postdata(); ?>
    </div>

  </div>
</section>

<section class="py-16 border-t border-white border-opacity-20">
  <div class="container mb-8">
    <h2 class="mb-8 text-32px font-light"><?= pll__( 'presentation_artists_title' ) ?></h2>
  </div>
    <?php get_template_part( 'views/partials/slider-artistes' ); ?>
</section>