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
A voir également:
- Grid en css
- Montage photo grid - Télécharger - Montage photo
- Photo Grid Collage -Android - Télécharger - Montage photo
- Logiciel photo grid - Télécharger - Montage photo
- Photo Grid Builder - Télécharger - Montage photo
- Background color css ✓ - Forum CSS
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>