简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment puis-je implémenter un système de grille dans mes divs à l'aide de CSS Grid ?
P粉195200437
P粉195200437 2023-09-08 16:03:49
0
2
402

Je souhaite créer un div avec 2 colonnes, lorsque j'ajoute un élément dans le div parent, il doit être dans la première colonne et lorsque la première colonne contient 3 éléments et que je souhaite ajouter d'autres éléments, il doit être dans la colonne deux. C'est l'image que je recherche :

Je n'ai trouvé aucune réponse sur internet, j'ai essayé le générateur de grille CSS mais sans aucun résultat..

CSS Grid Generator mais je n'arrive pas à obtenir la bonne réponse

P粉195200437
P粉195200437

répondre à tous (2)
P粉427877676
P粉4278776762023-09-09 00:57:36 2 plancher

Ok... on dirait que vous avez juste un problème avec le flux du maillage. Pour le changer, utilisezgrid-auto-flow:column;就是这样，网格的流程将从行更改为列。您可以根据需要更改grid-template-rows.

Comme+0
Ajouter une réponse
    P粉469090753
    P粉4690907532023-09-09 00:09:36 1 plancher

    Ce que vous devez faire en HTML est :

     
    1
     
    2
     
    3
     
    4
     
    5
     
    6

    et CSS :

    .parent{ display:grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows:1fr 1fr 1fr; }

    Démo

    Comme+0
    Ajouter une réponse
      Sujets populaires
      Plus>
      Articles populaires
      Tutoriels populaires
      Plus>
      Tutoriels associés
      Recommandations populaires
      Derniers cours
      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！