Grid en css
Résolu
JC_8280
Messages postés
78
Statut
Membre
-
JC_8280 Messages postés 78 Statut Membre -
JC_8280 Messages postés 78 Statut Membre -
Bonjour,
J'ai un problème avec mon css: j' utilise des grid pour placer mes éléments mais il y' en a un qui ne viens pas se mettre ou je veux.
Merci d'avance pour votre aide.
voir image et code css:

J'ai un problème avec mon css: j' utilise des grid pour placer mes éléments mais il y' en a un qui ne viens pas se mettre ou je veux.
Merci d'avance pour votre aide.
voir image et code css:

#id_fac {
width: 297mm;
height: 210mm;
border: 1px;
border-color: black;
border: solid;
}
canvas {
border:1px, solid, black;
width: 650;
height: 75;
background-color: yellow;
}
.classControle{
display: grid;
grid-gap:2px;
background-color: rgb(245, 124, 124);
grid-template-columns: 6mm, 6mm, 6mm, 6mm, 6mm, 6mm, auto;
grid-template-rows: 8mm, 8mm, 8mm;
/*height: 65 px;*/
border: 3px double rgb(252, 9, 1);
font-size: 12px;
}
.classControle > p {
background-color: rgba(255, 255, 255, 0.705);
text-align: center;
/*padding: 20px 0;
font-size: 30px;*/
}
.classNominale{
grid-row: 1 / span 2;
margin: 1px;
height: 50px;
}
.classTol_sup{
grid-row: 1;
margin: 1px;
height: 25px;
}
.classTol_inf{
grid-row: 2;
margin: 1px;
height: 25px;
}
.classFrequence{
grid-row: 1 / span 2;
margin: 1px;
height: 50px;
}
.classInstrument{
grid-row: 1 / span 2;
margin: 1px;
height: 50px;
}
.classAvDer{
grid-row: 1 / span 3;
margin: 1px;
height: 75px;
}
.classDer{
grid-row: 1 / span 3;
margin: 1px;
height: 75px;
}
.classCommentaire{
grid-column: 1 / span 4;
margin: 1px;
height: 25px;
}
.classGraphe{
grid-row: 1 / span3;
}
Configuration: Windows / Firefox 84.0
1 réponse
-
Voici ma réponse trouvée à ma question, au cas où ça interesse quelqu'un:
<!DOCTYPE html> <html> <head> <style> .item1 { grid-area: A; } .item2 { grid-area: B; } .item3 { grid-area: C; } .item4 { grid-area: D; } .item5 { grid-area: E; } .item6 { grid-area: F; } .item7 { grid-area: G; } .item8 { grid-area: H; } .grid-container { display: grid; grid-template-areas: 'A B D F G' 'A C E F G' 'H H H H H'; grid-gap: 10px; background-color: #2111F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } </style> </head> <body> <h1>Grid Layout</h1> <p>This grid layout contains six columns and three rows:</p> <div class="grid-container"> <div class="item1">1=A</div> <div class="item2">2=B</div> <div class="item3">3=C</div> <div class="item4">4=D</div> <div class="item5">5=E</div> <div class="item6">6=F</div> <div class="item7">7=G</div> <div class="item8">8=H</div> </div> </body> </html>