Discussion :

[labarre2002]

Bonjour

je viens de creer des cellules avec Grid

Code css :

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

1
2
3
4
5
 
display: grid;
grid-template-columns: 395px 395px;
grid-template-rows: 275px 275px;
margin: 0 auto;

Le soucis est que je desire agrandir d'un tiers la cellule 3
comme ci-dessous



Pourrais-je avoir des idees ?

Merci.

[NoSmoking]

Bonjour,

Pourrais-je avoir des idees ?

Plusieurs méthodes peuvent être mises en oeuvre pour obtenir un tel résultat, les propriétés grid-column et grid-row par exemple, mais l'utilisation des grid-template-areas me semble plus appropriée et permet de visualiser facilement la structure et la disposition à l'intérieur d'un conteneur grille.

Prenons un l'exemple suivant :
On cherche à répartir 4 zones ayant les largeurs suivantes :

• A = 270px
• B = 270px
• C = 360px
• D = 180px

On part sur la structure HTML suivante :

Code html :

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

1
2
3
4
5
6
<div class="grid">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>

On nomme les zones en utilisant la propriété CSS grid-area :

Code :

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

1
2
3
4
div.a { grid-area: a;}
div.b { grid-area: b;}
div.c { grid-area: c;}
div.d { grid-area: d;}

On découpe le conteneur, dans sa largeur, en trois colonnes : Col-1 = 270px, Col-2 = 90px et Col-3 = 180px.

On définie nos 4 zones comme suit :

• A = 270px (Col-1)
• B = 90px + 180px (Col-2 + Col-3)
• C = 270px + 90px (Col-1 + Col-2)
• D = 180px (Col-3)

Le tout se traduit en langage « Grid Layout » par :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.grid {
  display: grid;                /* modèle de mise en page */
  grid-template-rows: 1fr 1fr;  /* 2 lignes de même hauteur */
  grid-template-columns: 270px 90px 180px;
  grid-template-areas:
    "a b b"
    "c c d";
 
  width: 540px;
  height: 320px;
}

Voilà pour une façon de faire.

Exemple en ligne :

↪ Grid Layout et grid-template-areas

[labarre2002]

BOnsoir

NoSmoking


Merci pour la réponse vu le nombre de jour sans réponse .J' ai pense que c 'était une question STUPIDE.
J'ai positionné la céllule en absolute puis je l'ai redimensionné.


Résultat:



Encore merci pour tes sempiternelles réponses instructives.