Aligner des cards sur ma page

**cdevl37** · 30/01/2024, 20h13

Bonjour,

Je m'entraine au css et je ne voudrais remplir ma page avec 24 card et je n'y arrive pas, pouvez vous m'aider ?

Mon

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<body>
    <div class="cards">
        <div class="card red">Hover me</div>
        <div class="card blue">Hover me</div>
        <div class="card green">Hover me</div>
    </div>
</body>

Mon CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
 
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #000;
}
 
.cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
 
.cards>.red {
    background-color: #f43f5e;
}
 
.cards>.blue {
    background-color: #3b82f6;
}
 
.cards>.green {
    background-color: #22c55e;
}
 
.cards>.card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 100px;
    width: 250px;
    border-radius: 10px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: all 1s;
}
 
.cards>.card:hover {
    transform: scale(1.1, 1.1);
}
 
.cards:hover>.card:not(:hover) {
    filter: blur(10px);
    transform: scale(0.9, 0.9);
}

**ASCIIDEFOND** · 31/01/2024, 11h35

Salut cdevl37,

Exemple avec la propriété

grid-template-columns

https://developer.mozilla.org/fr/doc...mplate-columns

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
    <div class="cards">
        <div class="card red">Hover me</div>
        <div class="card blue">Hover me</div>
        <div class="card green">Hover me</div>
        <div class="card red">Hover me</div>
        <div class="card blue">Hover me</div>
        <div class="card green">Hover me</div>
        <div class="card red">Hover me</div>
        <div class="card blue">Hover me</div>
        <div class="card green">Hover me</div>
        <div class="card red">Hover me</div>
        <div class="card blue">Hover me</div>
        <div class="card green">Hover me</div>
        <div class="card red">Hover me</div>
        <div class="card blue">Hover me</div>
        <div class="card green">Hover me</div>
        <div class="card red">Hover me</div>
        <div class="card blue">Hover me</div>
        <div class="card green">Hover me</div>
        <div class="card red">Hover me</div>
        <div class="card blue">Hover me</div>
        <div class="card green">Hover me</div>
        <div class="card red">Hover me</div>
        <div class="card blue">Hover me</div>
        <div class="card green">Hover me</div>
    </div>
</body>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
 
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #000;
}
 
.cards {
  display: grid;
  grid-template-columns: repeat(6, 250px);
  row-gap: 15px;
  column-gap: 15px;
}
 
@media screen and (max-width: 1080px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(2, 250px) !important;
  }
}
 
@media screen and (max-width: 1600px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(4, 250px);
  }
}
 
.cards > .red {
  background-color: #f43f5e;
}
 
.cards > .blue {
  background-color: #3b82f6;
}
 
.cards > .green {
  background-color: #22c55e;
}
 
.cards > .card {
  text-align: center;
  width: 250px;
  border-radius: 10px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: all 1s;
  line-height: 100px;
}
 
.cards > .card:hover {
  transform: scale(1.1, 1.1);
}
 
.cards:hover > .card:not(:hover) {
  filter: blur(10px);
  transform: scale(0.9, 0.9);
}

**cdevl37** · 31/01/2024, 11h50

Merci vous sa fonctionne

**NoSmoking** · 31/01/2024, 17h08

Bonjour,
dans la mesure où les dimensions des éléments mis en « grille » sont fixes et connues on peut tout à fait s'affranchir des média-queries.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.cards {
  --max_column: 6;
  --width_column: 250px;
  --gap: 1em;
  --gap_total: calc(var(--gap) * var(--max_column));
  --w_totale: calc(var(--width_column) * var(--max_column));
 
  display: grid;
  grid-template-columns: repeat(auto-fill,var(--width_column));
  gap: var(--gap);
  justify-content: center;
  margin: auto;
  max-width: calc(var(--w_totale) + var(--gap_total));
}

**cdevl37** · 02/02/2024, 14h49

super merci sa fonctionne

bon weekend

Aligner des cards sur ma page

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager