Aligner des cards sur ma page

Version imprimable

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:

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:

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

Salut cdevl37,

Exemple avec la propriété

Citation:

grid-template-columns

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

Code:

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:

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

31/01/2024, 11h50
cdevl37

Merci vous sa fonctionne

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:

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

02/02/2024, 14h49
cdevl37

super merci sa fonctionne

bon weekend