Utiliser des grilles pour créer cette conception spécifique : un guide étape par étape-Questions et réponses sur le réseau chinois PHP
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Utiliser des grilles pour créer cette conception spécifique : un guide étape par étape
P粉662361740
P粉662361740 2024-04-06 20:29:08
0
2
432

J'essaie de créer une mise en page similaire à cette image, j'ai essayé d'utiliser cette grille mais je n'y parviens pas.

     
  •  
    •  
  •  
    •  
  •  
    •  
  •  
    •  
.container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; } .first{ grid-column: span 2; }

P粉662361740
P粉662361740

répondre à tous (2)
P粉085689707
P粉0856897072024-04-07 19:09:26 2 plancher

J'ai essayé ça et ça a fonctionné

En HTML

           

            

            

            

            

           
In CSS body { margin: 0px; padding: 0px; } .container { height: 500px; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 15px; margin: 20px; } .first { border: 5px solid black; grid-column: span 2; grid-row: 1/3; } .second { border: 5px solid black; grid-column: span 2; grid-row: 1/2; } .third { border: 5px solid black; grid-column: span 1; grid-row: 2/3; } .fourth { border: 5px solid black; grid-column: span 1; grid-row: 2/3; }
Comme+0
Ajouter une réponse
    P粉163465905
    P粉1634659052024-04-07 17:07:12 1 plancher

    html et css ont été modifiés, et il n'est pas recommandé d'utiliserul和lipour la mise en page. Vous devez étendre la grille selon vos besoins.

    .container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; width: 500px; background:#ccc; height:500px; } .first{ background:red; grid-column: span 2; grid-row: 1/3; } .second{ background:green; grid-column: span 2; grid-row: 1/2; } .third{ background:yellow; grid-column: span 1; grid-row: 2/3; } .fourth{ background:orange; grid-column: span 1; grid-row: 2/3; }
    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！