Grid CSS

Marsh Posté le 17-08-2019 à 01:52:02

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;
}

Reply

Marsh Posté le 17-08-2019 à 01:52:02

Reply

Marsh Posté le 17-08-2019 à 17:08:43

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

Code :

<!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

Code :

html, body{
width: 100%;
margin: 0 auto;
}
.grid{
display: grid;
grid-template-columns: repeat(1, minmax(200px, auto));
grid-template-rows: auto;
grid-gap: 10px;
grid-auto-flow: row dense;
justify-content: center;
align-content: center;
}
@media (min-width: 1140px) {
.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;
}
}

Reply

Marsh Posté le 20-08-2019 à 19:38:01

hhmmmm....

Reply

Marsh Posté le 20-08-2019 à 20:15:48

Bonjour,

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

Code :

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.

Reply

Grid CSS

Sujets relatifs:

Leave a Replay