Aligner des éléments dans les cellules d’une grille

8/3/2022 ☼ grid ☼ grille ☼ positionnement

Niveau : ★★☆☆☆

Les sites de Jens Simmons et CSS Tricks sont des excellentes ressources pour continuer à travailler avec CCS Grid.

1 - Le résultat dans la page

See the Pen Aligner des items dans les cellules by Nicolas Tilly (@nicolastilly) on CodePen.

Voici comment aligner des éléments dans les cellules d’une grille. Pour l’exercice, je suis parti sur la base d’un carré pour la grille (une ligne et une colonne). Nous allons donc voir comment positionner des éléments selon 2 axes : la ligne et la colonne.

Pour tous les exemples ci-dessous, j’ai utilisé le même principe de grille en carré centrée dans la fenêtre avec une section. L’idée est de ne changer que les id des cellules et des items (c2, i2, c3, i3…). Au total, l’exercice comporte 3 positionnements.

Voici le code html :

<section>

<div id="container">

<div id="c1"><!--la cellule-->
<div id="i1"></div><!--l'item-->
</div>

</div>

</section>

2 - Le positionnement des items dans la cellule sur l’axe des lignes

Alignement au début gauche de la cellule :

/*la cellule c1*/
#c1 {
    justify-self: start; /*alignement au début gauche de la cellule*/
}
/*l'item i1 dans la cellule c1*/
#i1 {
    width: 100px;
    height: 300px;
    /*ne sert que pour l'aspect graphique del'item avec les rayures rouge*/
    background-color: #ffffff;
    opacity: 1;
    background-size: 11px 11px;
    background-image: repeating-linear-gradient(
        45deg,
        #ff3838 0,
        #ff3838 1.1px,
        #ffffff 0,
        #ffffff 50%
    );
}

Alignement à la fin de la cellule :

/*la cellule c2*/
#c2 {
    justify-self: end; /*alignement à la fin de la cellule*/
}
/*l'item i2 dans la cellule c2*/
#i2 {
    width: 100px;
    height: 300px;
    background-color: #ffffff;
    opacity: 1;
    background-size: 11px 11px;
    background-image: repeating-linear-gradient(
        45deg,
        #ff3838 0,
        #ff3838 1.1px,
        #ffffff 0,
        #ffffff 50%
    );
}

Alignement au centrer de la cellule :

/*la cellule c3*/
#c3 {
    justify-self: center; /*alignement au centrer de la cellule*/
}
/*l'item i3 dans la cellule c3*/
#i3 {
    width: 100px;
    height: 300px;
    background-color: #ffffff;
    opacity: 1;
    background-size: 11px 11px;
    background-image: repeating-linear-gradient(
        45deg,
        #ff3838 0,
        #ff3838 1.1px,
        #ffffff 0,
        #ffffff 50%
    );
}

3 - Positionnement des items dans les cellules sur l’axe des colonnes

Alignement en haut de la cellule :

/*la cellule c4*/
#c4 {
    align-self: start; /*alignement en haut de la cellule*/
}
/*l'item i4 dans la cellule c4*/
#i4 {
    width: 300px;
    height: 100px;
background-color: #ffffff;
opacity: 1;
background-size: 11px 11px;
background-image: repeating-linear-gradient(-45deg, #5993fd 0, #5993fd 1.1px, #ffffff 0, #ffffff 50%);
}

Alignement en bas de la cellule :

/*la cellule c5*/
#c5 {
     align-self: end; /*alignement en bas de la cellule*/
}
/*l'item i5 dans la cellule c5*/
#i5 {
    width: 300px;
    height: 100px;
background-color: #ffffff;
opacity: 1;
background-size: 11px 11px;
background-image: repeating-linear-gradient(-45deg, #5993fd 0, #5993fd 1.1px, #ffffff 0, #ffffff 50%);
}

Alignement au centre de la cellule :

/*la cellule c6*/
#c6 {
     align-self: center; /*alignement au centre de la cellule*/
}
/*l'item i6 dans la cellule c6*/
#i6 {
    width: 300px;
    height: 100px;
background-color: #ffffff;
opacity: 1;
background-size: 11px 11px;
background-image: repeating-linear-gradient(-45deg, #5993fd 0, #5993fd 1.1px, #ffffff 0, #ffffff 50%);
}