Utilisation du modèle de GRID

**simooon** · 15/12/2023, 16h41

Bonjour à tous.
J'essaie de realiser ma 1ere page web en html/css que je souhaite organiser à l'aide des GRID.
Pour commencer, j'ai essayé de reproduire le style de la bannière suivante :
Nom : grid.PNG
Affichages : 193
Taille : 14,6 Ko

Nom : grid.PNG
Affichages : 193
Taille : 14,6 Ko

Malheureusement, je n'arrive pas du tout à agencer les différents blocs et malgré mes recherches sur le net, je n'y arrive pas! Besoin d'aide pour comprendre pourquoi svp

HTML

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
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="../css/acceuil.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Signika&display=swap" rel="stylesheet">
</head>
 
<body>
 
    <!-- ######### HEADER ######### -->
    <header>
        <div class="header">
            <div class="img">
                <img src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg?w=740&t=st=1702653702~exp=1702654302~hmac=34d5e6626047cadcff70784088f4839fea90c7d1399906d42e2ed0e42fea8855" alt="logo">
            </div>
            <div class="haut">
                <a href="test.html">
                    Documentations/Guides techniques
                </a>
            </div>
            <div class="bas1">
                <a href="#">
                    TEST1
                </a>
            </div>
            <div class="bas2">
                <a href="2.html">
                    TEST2
                </a>
            </div>  
        </div>
    </header> 
 
</body>
</html>

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
header .header {
 
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 5px;
}
 
header .img {
    grid-column: 1/2;
    grid-row: 1/2;
}
 
header .haut {
    grid-column: 3/4;
    grid-row: 1/1;
}
 
header .bas1 {
    grid-column: 3/4;
    grid-row: 2/2;
}
 
header .bas2 {
    grid-column: 4/5;
    grid-row: 2/2;
}

**unanonyme** · 15/12/2023, 20h46

Bonjour,

Votre sélecteur ne résout rien "header div .header ".

"header .header" peut être.

header .header c'est pas terrible.

acceuil c'est pas terrible non plus.

Finalement, c'est bien d'avoir poster le code, mais quand je le reproduis ici, c'est très loin de votre image. Trop loin.

Ce n'est pas normal.

Bonne journée.

**simooon** · 15/12/2023, 21h57

Merci pour cette très grande aide, sans aucune explications sur mes erreurs. Pourquoi avoir pris la peine d'écrire si l'envie d'aider n'y ai pas ?

J'espère avoir de la vraie et sincère aide

**unanonyme** · 15/12/2023, 22h01

Bonjour,

moi j'estime que c'était sincère.
Peut être pas à la hauteur de vos attentes,
à mon corps défendant,
vous n'en faites pas mentions,
de vos attentes.

Bonne journée.

**laurentSc** · 15/12/2023, 22h08

Bonsoir,
pas le temps de regarder ni compétent pour t'aider, simplement, j'ai récupéré récemment un guide sur le CSS avec grid qui peut peut-être t'aider : https://css-tricks.com/snippets/css/...te-guide-grid/

C'est justement unanonyme qui m'a signalé ce lien !

**unanonyme** · 15/12/2023, 22h54

Bonjour,

c'est pas très sympa de me faire passer pour un con
en éditant votre message initial après coup,
m'enfin bref, voilà une astuce pour vous aider,
pour le reste je m'arroge le droit de vous le dire clairement,
démerdez vous.

https://firefox-source-docs.mozilla....uts/index.html

D'autres le liront et trouveront cela utile.

Bonne journée.

**simooon** · 16/12/2023, 00h28

@unanonyme

heu... ce message devait précéder l’édit de mon post, dommage que vous l'ayez mal pris car je voulais en même temps vous remercier pour cela...

Avec vos remarques et après recherche, j'ai donc compris que j'utilisais mal les syntaxes css, après légère modification, les blocks s'agencent donc bien.

Merci pour le lien quand même, j'espère pouvoir trouver par la suite comment centrer le texte en plein milieu des block.

**ProgElecT** · 16/12/2023, 09h12

Salut

text-align: center;.

Ce lien pour centrer en horizontal et/ou vertical https://www.w3schools.com/css/css_align.asp

**laurentSc** · 17/12/2023, 15h20

Bonjour,
j'ai essayé de me rapprocher un peu de la mise en page présentée au post #1.
J'ai tenu compte de la proposition de ProgElecT, et voici :

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
29
30
31
32
33
34
35
36
37
38
39
40
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link href="accueil.css" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Signika&display=swap" rel="stylesheet">
    </head>
 
    <body>
 
    <!-- ######### HEADER ######### -->
    <header>
        <div>
            <div class="img cell">
                <img src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg?w=740&t=st=1702653702~exp=1702654302~hmac=34d5e6626047cadcff70784088f4839fea90c7d1399906d42e2ed0e42fea8855" width="150" alt="logo">
            </div>
 
            <div class="haut cell padding">
                <a href="test.html">
                    Documentations/Guides techniques
                </a>
            </div>
            <div class="bas1 cell padding">
                <a href="#">
                    TEST1
                </a>
            </div>
            <div class="bas2 cell padding">
                <a href="2.html">
                    TEST2
                </a>
            </div>
        </div>
    </header>
    </body>
    </html>

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
header div .header {
 
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 5px;
}
 
header .img img {
    grid-column: 1/2;
    grid-row: 1/2;
}
 
header div .haut {
    grid-column: 3/4;
    grid-row: 1/1;
}
 
header div .bas1 {
    grid-column: 3/4;
    grid-row: 2/2;
}
 
header div .bas2 {
    grid-column: 4/5;
    grid-row: 2/2;
}
 
header div .cell, header{
    text-align: center;
    display: inline-block;
}
 
header div .padding {
padding: 30px;
}

https://codepen.io/laurentsch/pen/bGzXegZ
C'est pas nickel mais on se rapproche...

EDIT : en plus, si on enlève le text-align: center;, ça change rien.

**simooon** · 17/12/2023, 19h50

Envoyé par laurentSc

Bonjour,
j'ai essayé de me rapprocher un peu de la mise en page présentée au post #1.
J'ai tenu compte de la proposition de ProgElecT, et voici :

EDIT : en plus, si on enlève le text-align: center;, ça change rien.

Merci beaucoup Laurent pour votre réponse.
J'ai bien analysé celà et j'ai compris le principe.

Autrement, j'ai eu entre temps l'occasion de découvrir le principe des flexbox et je trouve dans mon cas, c'est bien plus facile que l'utilisation des grids.

Je post un exemple de ce que j'ai découvert au cas où ça intéresse d'autres.

Merci encore

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
 
 
    <!-- ######### HEADER ######### -->
    <header>
        <div class="header">
 
            <div class="img_cell">
                <img  src="https://img.freepik.com/vecteurs-       libre/debut_53876-25533.jpg?w=740&t=st=1702653702~exp=1702654302~hmac=34d5e6626047cadcff70784088f4839fea90c7d1399906d42e2ed0e42fea8855" width="150" alt="logo">
            </div>
 
            <div class="container_droit1">
                <div class="haut cell padding">
                    <a href="test.html">
                        Documentations/Guides techniques
                    </a>
                </div>
                <div class="container_droit2">
                    <div class="bas1 cell padding">
                        <a href="#">
                            TEST1
                        </a>
                    </div>
 
                    <div class="bas2 cell padding">
                        <a href="2.html">
                            TEST2
                        </a>
                    </div>
 
                    <div class="bas2 cell padding">
                        <a href="2.html">
                            TEST3
                        </a>
                    </div>
 
                    <div class="bas2 cell padding">
                        <a href="2.html">
                            TEST4
                        </a>
                    </div>
                </div>
          </div>
 
        </div>
    </header>

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
 
.header{
  display: flex;
  width:1000px;
  height:150px;
  flex-wrap:nowrap;
}
 
.img_cell{
  display:flex;
  width:20%;
  height:150px;
  justify-content:center;
  align-items:center;
  border:solid;
}
 
img{
  width:100%;
  height:100%;
}
 
.container_droit1{
  display:flex;
  flex-wrap:wrap;
  width:80%;
  height:100%;
  justify-content:flex-start;
  align-items:center;
  border:solid;
}
 
.container_droit2{
  display:flex;
  width:80%;
  height:50%;
  justify-content:flex-start;
  align-items:center;
  gap :100px;
}

**ASCIIDEFOND** · 17/12/2023, 20h58

Salut à tous,

ou sinon comme cela ?

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
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
68
69
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        :root {
            --main-width: 150px;
        }
 
        .img img {
            width: var(--main-width)
        }
 
        header {
            display: grid;
            grid-template-columns: repeat(50, auto);
            column-gap: 15px;
        }
 
        .padding {
            line-height: var(--main-width);
            height: var(--main-width);
        }
 
        .padding a {
            min-width: max-content;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
 
<body>
    <!-- ######### HEADER ######### -->
    <header>
        <div class="img cell">
            <img src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg?w=740&t=st=1702653702~exp=1702654302~hmac=34d5e6626047cadcff70784088f4839fea90c7d1399906d42e2ed0e42fea8855"
                alt="logo">
        </div>
 
        <div class="haut cell padding">
            <a href="test.html">
                Documentations/Guides techniques
            </a>
        </div>
        <div class="bas1 cell padding">
            <a href="#">
                TEST1
            </a>
        </div>
        <div class="bas2 cell padding">
            <a href="2.html">
                TEST2
            </a>
        </div>
        <div class="bas3 cell padding">
            <a href="3.html">
                TEST3
            </a>
        </div>
    </header>
 
</body>
 
</html>

En réduisant ou augmentant la taille de l'image (---main width), les divs seront toujours verticalement centrés.

**laurentSc** · 17/12/2023, 23h27

Bonsoir,

j'ai repris votre code en supprimant ce qui semblait inutile et surtout en ajoutant en commentaires quelques questions sur votre CSS :

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
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
68
69
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        :root {                   /* ça cible quoi :root  ? */
            --main-width: 150px;   /* --main-width, ça signifie quoi ? */ 
        }
 
        .img img {
            width: var(--main-width)
        }
 
        header {
            display: grid;
            grid-template-columns: repeat(50, auto);
            column-gap: 15px;
        }
 
        .padding {
            line-height: var(--main-width);
            height: var(--main-width);
        }
 
        .padding a {
            min-width: max-content;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
 
<body>
<!-- ######### HEADER ######### -->
<header>
    <div class="img padding">
        <img src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg?w=740&t=st=1702653702~exp=1702654302~hmac=34d5e6626047cadcff70784088f4839fea90c7d1399906d42e2ed0e42fea8855"
             alt="logo">
    </div>
 
    <div class="padding">
        <a href="test.html">
            Documentations/Guides techniques
        </a>
    </div>
    <div class="padding">
        <a href="#">
            TEST1
        </a>
    </div>
    <div class="padding">
        <a href="2.html">
            TEST2
        </a>
    </div>
    <div class="padding">
        <a href="3.html">
            TEST3
        </a>
    </div>
</header>
 
</body>
 
</html>

J'ai cru comprendre que les 2 tirets servent à déclarer une variable CSS (notion que je connaissais pas) et que var(--main-width) sert à utiliser cette variable. C'est ça ?

Le principe CSS du grid, je connais pas du tout et flex juste un peu. Mais le code de ASCIIDEFOND est super simple !

**ASCIIDEFOND** · 18/12/2023, 00h47

Envoyé par laurentSc

...J'ai cru comprendre que les 2 tirets servent à déclarer une variable CSS...

Oui pour les déclarer c'est assez simple, deux tirets suivi d'un nom de variable.

Les variables CSS
https://developer.mozilla.org/fr/doc...tom_properties

Pour réaliser des calculs
https://developer.mozilla.org/fr/docs/Web/CSS/calc
https://www.zonecss.fr/proprietes-cs...-fonction.html

Pour les modifier via la JavaScript
https://www.gekkode.com/developpemen...variables-css/

**laurentSc** · 18/12/2023, 14h18

Merci pour les liens qui me renseignent bien ; par contre, maitrisant mal le CSS, j'ai d'autres questions :

1- grid-template-columns: repeat(50, auto); j'ai pas trouvé la syntaxe dans ce guide https://css-tricks.com/snippets/css/...te-guide-grid/. Comme je cherche souvent mal, peux tu me guider ?

2- tu cibles d'abord la classe paddding puis les liens dans les éléments qui ont cette classe padding (padding a). Or si je mets toutes les propriétés CSS dans la classe padding, je vois aucune différence. Donc quelle est l'utilité ?

3- Si je supprime height: var(--main-width); de la classe padding, pareil, je vois aucune différence. Donc quelle est l'utilité ?

4- Peux tu expliquer min-width: max-content; ?

**NoSmoking** · 18/12/2023, 16h22

Bonjour,

Envoyé par laurentSc

Mais le code de ASCIIDEFOND est super simple !

cela commence par une structure HTML minimale et suffisante contrairement de ce qui est montré auparavant.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<!-- élément GRID -->
<header>
    <!-- item GRID -->
    <div></div>
    <!-- item GRID -->
    <div></div>
    <!-- item GRID -->
    <div></div>
    <!-- item GRID -->
    <div></div>
</header>

c'est un préalable pour savoir où l'on en est sans trop ce prendre la tête. Aucune classe particulière sur les enfants directs n'est utile dans un premier temps.

Le CSS suivant est suffisant pour un rendu immédiat

Code :

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

1
2
3
4
5
6
header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);  /* 5 colonnes de même dimension */
  column-gap: 1em;                        /* un peu d'espace entre chaque */
  place-items: center;                    /* centrage vertical et horizontal */
}

Tout le reste n'est qu'ajustement voire piège

Ajustement : l'image ne doit pas être démesurée donc on la cible

Code :

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

1
2
3
header img {
  width: 150px;
}

La hauteur de son « espace grille » déterminera la hauteur des autres « espaces grilles » si c'est c'est le plus haut. Si ce n'est pas le cas alors l'« espace grille » le plus haut déterminera les hauteurs des autres « espaces grilles ». On n'a donc pas besoin de la classe padding, au moins pour cela.

Piège : dangereux d'utiliser une propriété line-height pour centrer verticalement, surtout quand d'autres propriétés font bien mieux le job. En cas de passage à la ligne, par exemple, le design est cassé, c'est récupérable mais cassé.

Le CSS s'est donc fortement allégé, ..., il vaut mieux démarrer simple pour pouvoir traiter du « plus compliqué ».

**laurentSc** · 18/12/2023, 17h03

Là, excellent

En résumé, on arrive à :

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
<header>
    <div>
        <img src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg?w=740&t=st=1702653702~exp=1702654302~hmac=34d5e6626047cadcff70784088f4839fea90c7d1399906d42e2ed0e42fea8855"
             alt="logo">
    </div>
 
    <div>
        <a href="test.html">
            Documentations/Guides techniques
        </a>
    </div>
    <div>
        <a href="#">
            TEST1
        </a>
    </div>
    <div>
        <a href="2.html">
            TEST2
        </a>
    </div>
    <div>
        <a href="3.html">
            TEST3
        </a>
    </div>
</header>

Code css :

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

1
2
3
4
5
6
7
8
9
10
header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);  /* 5 colonnes de même dimension */
  column-gap: 1em;                        /* un peu d'espace entre chaque */
  place-items: center;                    /* centrage vertical et horizontal */
}
 
header img {
    width: 150px;
}

**simooon** · 18/12/2023, 22h37

top, merci pour les liens et réponses, je comprends beaucoup mieux maintenant les grids.

Du coup, le rendu souhaité ressemblerait à ca

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
<header>
    <div class="img">
        <img src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg?w=740&t=st=1702653702~exp=1702654302~hmac=34d5e6626047cadcff70784088f4839fea90c7d1399906d42e2ed0e42fea8855"
             alt="logo">
    </div>
 
    <div class="doc">
        <a href="test.html">
            Documentations/Guides techniques
        </a>
    </div>
    <div class="test1">
        <a href="#">
            TEST1
        </a>
    </div>
    <div class="test2">
        <a href="2.html">
            TEST2
        </a>
    </div>
    <div class="test3">
        <a href="3.html">
            TEST3
        </a>
    </div>
</header>

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
header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);  /* 5 colonnes de même dimension */
    grid-template-rows: repeat(2, 1fr);  /* 5 lignes de même dimension */
  column-gap: 1em;                        /* un peu d'espace entre chaque */
}
 
.logo{
  place-items: center;
}
 
header img {
    width: 150px;
}
 
.img{
    grid-column:1/2;
    grid-row:1/3;
}
 
.doc{
    grid-column:2/3;
    grid-row:1/2;
}
 
.test1{
    grid-column:2/3;
    grid-row:2/3;
}
 
.test2{
    grid-column:3/4;
    grid-row:2/3;
}
 
.test3{
    grid-column:4/5;
    grid-row:2/3;
}

**laurentSc** · 18/12/2023, 23h02

Plutôt à ça pour le html :

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
<header>
    <div>
        <img src="https://img.freepik.com/vecteurs-libre/debut_53876-25533.jpg?w=740&t=st=1702653702~exp=1702654302~hmac=34d5e6626047cadcff70784088f4839fea90c7d1399906d42e2ed0e42fea8855"
             alt="logo">
    </div>
 
    <div>
        <a href="test.html">
            Documentations/Guides techniques
        </a>
    </div>
    <div>
        <a href="#">
            TEST1
        </a>
    </div>
    <div>
        <a href="2.html">
            TEST2
        </a>
    </div>
    <div>
        <a href="3.html">
            TEST3
        </a>
    </div>
</header>

et pour le CSS :

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
header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);  /* 5 colonnes de même dimension */
    grid-template-rows: repeat(2, 1fr);  /* 5 lignes de même dimension */
    column-gap: 1em;                        /* un peu d'espace entre chaque */
    place-items: center;                 /* à laisser dans header */
}
 
header img {
    width: 150px;
}
/*
j'ai enlevé toutes ces classes qui servent à rien
 
.img{
    grid-column:1/2;
    grid-row:1/3;
}
.doc{
    grid-column:2/3;
    grid-row:1/2;
}
 
.test1{
    grid-column:2/3;
    grid-row:2/3;
}
 
.test2{
    grid-column:3/4;
    grid-row:2/3;
}
 
.test3{
    grid-column:4/5;
    grid-row:2/3;
}*/

**simooon** · 18/12/2023, 23h06

Envoyé par laurentSc

Plutôt à ça pour le CSS :

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
header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);  /* 5 colonnes de même dimension */
    grid-template-rows: repeat(2, 1fr);  /* 5 lignes de même dimension */
    column-gap: 1em;                        /* un peu d'espace entre chaque */
    place-items: center;                 /* à laisser dans header */
}
 
header img {
    width: 150px;
}
/*
j'ai enlevé toutes ces classes qui servent à rien
 
.img{
    grid-column:1/2;
    grid-row:1/3;
}
.doc{
    grid-column:2/3;
    grid-row:1/2;
}
 
.test1{
    grid-column:2/3;
    grid-row:2/3;
}
 
.test2{
    grid-column:3/4;
    grid-row:2/3;
}
 
.test3{
    grid-column:4/5;
    grid-row:2/3;
}*/

Documentation devait être placé au dessus des autres menus

**laurentSc** · 18/12/2023, 23h09

Je me couche

À demain

Utilisation du modèle de GRID

Grille CSS (CSS Grid)

Discussions similaires

Partager

Partager