Utilisation du modèle de GRID

Version imprimable

Voir 40 message(s) de cette discussion en une page

1 pièce(s) jointe(s)

Utilisation du modèle de GRID

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 :
Pièce jointe 647887

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:

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:

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

15/12/2023, 20h46
unanonyme

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.
15/12/2023, 21h57
simooon

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
15/12/2023, 22h01
unanonyme

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.
15/12/2023, 22h08
laurentSc

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 !
15/12/2023, 22h54
unanonyme

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.
16/12/2023, 00h28
simooon

@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.
16/12/2023, 09h12
ProgElecT

Salut

text-align: center;.

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

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:

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:

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.

Citation:

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:

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:

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

Salut à tous,

ou sinon comme cela ?

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

Bonsoir,

j'ai repris votre code en supprimant ce qui semblait inutile et surtout en ajoutant en commentaires quelques questions sur votre 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
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 !

18/12/2023, 00h47
ASCIIDEFOND

Citation:

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/
18/12/2023, 14h18
laurentSc

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

Bonjour,

Citation:

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:

1 2 3 4 5 6 7 8 9 10 11  <header>  <div></div>  <div></div>  <div></div>  <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:

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:

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é ».

Là, excellent :bravo:

En résumé, on arrive à :

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

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

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

Du coup, le rendu souhaité ressemblerait à ca

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

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

Plutôt à ça pour le html :

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

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

Citation:

Envoyé par laurentSc

Plutôt à ça pour le 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
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

18/12/2023, 23h09
laurentSc

Je me couche :zzz:
À demain

Voir 40 message(s) de cette discussion en une page