Centrer 1 colonne seulement a left dans un GRID

Bonjour,

J'ai un GRID de 4 colonnes, je voudrais que la première colonne soit centrée à gauche, mais que les trois autres restes centrés au milieu.

Voici le CODE en question :

			<h1>List of the week</h1>
			<section class="listoftheweek">
				<div class="listoftheweek_title">List Name</div>
				<div class="listoftheweek_title">First Badge</div>
				<div class="listoftheweek_title">Second Badge</div>
				<div class="listoftheweek_title">Date Release</div>
				<?php do { ?>
					<div><?php echo $row_sem['name']; ?></div>
					<div><?php echo $row_sem['FB']; ?></div>
					<div><?php echo $row_sem['SB']; ?></div>
					<div><?php echo substr($row_sem['date_release'], 0, 16); ?></div>
				<?php } while ($row_sem = mysqli_fetch_assoc($dem_sem)); ?>
			</section>

Le CSS pour cette partie :

.listoftheweek {
	display: grid;
	grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr;
	margin:1.6rem 2rem;
	grid-row-gap: 0.8rem;
	font-size:1rem;
	text-align: center;
}

.listoftheweek_title {
	font-weight: 700;
	font-size:1.2rem;
}

Merci pour votre aide

Salut,

justify-self: start;

sur la première colonne ?

Super merci!

Je suppose que je dois créer une classe que je vais attribuer à la première colonne afin seulement celle-ci soit alignée à gauche ?

C'est exactement ça !

Vous pouvez aussi passer par du CSS uniquement, avec par exemple :first-child :

.listoftheweek_title:first-child {
  justify-self: start;
}

Modifié par Olivier C (21 Jun 2023 - 20:43)