Bonjour à tout le monde déjà désolé pour les fautes d'orthographe je viens ici comme dit dans le titre j'ai j'essaye d'aller sur Ingrid avec un foreach mais avec la valeur grid-template-columns: je n'ai pas l'impression que ce soit compatible

ce que je veux dire c'est que chaque élément du foreach devrait se mettre l'un à côté de l'autre avec cet élément mais rien ne se passe comme prévu les images montrent comment tout se passe :

le grid

.gridpokemon {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

le containeur: 

.containerintogridpokemon {

    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid;
}

et le code : 

foreach ($pokemons['pokemon'] as $pokemonNumber => $pokemonName) {



        ?>

            <div class="gridpokemon">
                <div class="containerintogridpokemon">


                    <div class="nombrepokemon">
                        <?php

                        echo $pokemonNumber;
                        ?>
                    </div>
                    <div class="nompokemon">
                        <?php
                        echo $pokemonName;
                        ?>
                    </div>
                </div>
            </div>

        <?php
        }

donc voila le resultat : 

Donc ici on peut constater qu à la place que les éléments soient l'un à côté de l'autre sur 3 places tout est en colonne donc oui dans le flex j'avais mis une colonne mais ce sont tous les éléments c'est à dire le numéro et le nom qui sont en colonne donc ici tout marche et  sont parfaitement comme ils devraient marcher

mais maintenant je ne comprends pas pourquoi les éléments ne se mettent pas dans une grille

si j'ai mal compris le fonctionnement c'est normal je suis débutant par rapport à cela et si quelqu'un pourrait me donner une idée du comment cela fonctionnerait je serai toute ouïe et ravi d'entendre les résultats

merci a vous d avoir lu juque la

Bonsoir,

Je pense que c'est simplement parce que ton container gridpokemon est dans ton foreach, il crée donc une nouvelle grille de 3 colonnes pour chaque éléments.

essaie :

<div class="gridpokemon">
<?php
foreach ($pokemons['pokemon'] as $pokemonNumber => $pokemonName) {
 
 
 
        ?>
 
            
                <div class="containerintogridpokemon">
 
 
                    <div class="nombrepokemon">
                        <?php
 
                        echo $pokemonNumber;
                        ?>
                    </div>
                    <div class="nompokemon">
                        <?php
                        echo $pokemonName;
                        ?>
                    </div>
                </div>
           
        <?php
        }?> </div

-
Edité par Anamentis 12 août 2022 à 20:32:53

WillemCornil a écrit:

merci bien tout fonctionne parfaitement

Bonjour,

Sujet résolu