on larger screens, it has 3 cols to display the data divs, if the data is less than 3 it should be displayed at center of 3 cols, the code is below what should be added?

 <div className="grid md:grid-cols-2 md:gap-x-8 lg:grid-cols-3 mt-20 gap-y-10 justify-items-end w-full">
        {userPublications.map((publication, index) => (
          <div key={index} className="col-auto">
            <CardComponent title=`your text``your text`{publication.title} />
          </div>
        ))}
      </div>

I used “justify-items-center” but it is not working