Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1672 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Grid CSS

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Grid CSS

n°2337977
bckstr
Posté le 17-08-2019 à 01:52:02  profilanswer
 

Hello !  
J'ai un petit soucis avec mon système de grille :  
 
Mes grid-items s'empilent au lieu de remplir les lignes ... Enfin, je crois qu'il n'y a pas que ça mais je ne suis pas un expert des grid ..
 
Je mets le code ci-dessous, si quelqu'un aurait la solution pour faire fonctionner ma grille de sorte à ce que les grid-items se répartissent sur 3 colonnes & sur une 1 colonnes lorsque je redimensionne la fenêtre, Thanks  :jap: ..:
 
HTML
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="grid">
    <img src="../images/img.jpg" alt="" class="img1">
    <img src="../images/img.jpg" alt="" class="img2">
    <img src="../images/img.jpg" alt="" class="img3">
    <img src="../images/img.jpg" alt="" class="img4">
    <img src="../images/img.jpg" alt="" class="img5">
    <img src="../images/img.jpg" alt="" class="img6">
</div>
</body>
</html>
 
CSS
 
html, body{
    width: 100%;
    margin: 0 auto;
}
 
.grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, auto));
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-auto-flow: row dense;
    justify-content: center;
    align-content: center;
    grid-template-areas:
        "1 2 3"
        "4 5 6";
}
 
.img1{
    grid-area: 1;
}
 
.img2{
    grid-area: 2;
}
 
.img3{
    grid-area: 3;
}
 
.img4{
    grid-area: 4;
}
 
.img5{
    grid-area: 5;
}
 
.img6{
    grid-area: 6;
}
 
 

mood
Publicité
Posté le 17-08-2019 à 01:52:02  profilanswer
 

n°2337988
fusion20
Posté le 17-08-2019 à 17:08:43  profilanswer
 

Hey, en faisant ça, tu as 3 colonnes en pleine page et 1 avec un redimensionnement. Il suffit de modifier les px  
HTML

Code :
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="css/styles.css">
  7. </head>
  8. <body>
  9. <div class="grid">
  10.     <img src="../images/img.jpg" alt="" class="img1">
  11.     <img src="../images/img.jpg" alt="" class="img2">
  12.     <img src="../images/img.jpg" alt="" class="img3">
  13.     <img src="../images/img.jpg" alt="" class="img4">
  14.     <img src="../images/img.jpg" alt="" class="img5">
  15.     <img src="../images/img.jpg" alt="" class="img6">
  16. </div>
  17. </body>
  18. </html>


CSS

Code :
  1. html, body{
  2.     width: 100%;
  3.     margin: 0 auto;
  4. }
  5. .grid{
  6.     display: grid;
  7.     grid-template-columns: repeat(1, minmax(200px, auto));
  8.     grid-template-rows: auto;
  9.     grid-gap: 10px;
  10.     grid-auto-flow: row dense;
  11.     justify-content: center;
  12.     align-content: center;
  13. }
  14. @media (min-width: 1140px) {
  15. .grid{
  16.     display: grid;
  17.     grid-template-columns: repeat(3, minmax(200px, auto));
  18.     grid-template-rows: auto;
  19.     grid-gap: 10px;
  20.     grid-auto-flow: row dense;
  21.     justify-content: center;
  22.     align-content: center;
  23. }
  24. }

n°2338052
web20tpo
web20tpo
Posté le 20-08-2019 à 19:38:01  profilanswer
 

hhmmmm....

n°2338053
MaybeEijOr​Not
but someone at least
Posté le 20-08-2019 à 20:15:48  profilanswer
 

Bonjour,
 
Je pense que ce que tu cherches à faire c'est :

Code :
  1. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


 
https://developer.mozilla.org/fr/docs/Web/CSS/repeat


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Grid CSS

 

Sujets relatifs
[NOOB Inside HTML/CSS/JS] Recherche de conseils/infos.[HTML/CSS][JavaScript] Récupérer un ID sur une autre page Web
[Resolu][HTML/CSS][CSS] résolu - ombre manquante
Deux blocs de section côte à côte CSS ??[CSS]Grid, corrélation nbr Col et largeur en Px
Bootstrap 4 CSSSoucis avec du code CSS sur HTML.
[HTML/PHP/CSS] Diff de 2 données 
Plus de sujets relatifs à : Grid CSS


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR