28172 sujets
CSS et mise en forme, CSS3
Hello Jean et merci pour les compliments au sujet du livre.
Ce que tu fais est parfait, cela fonctionne bien (mais il ne faut pas oublier de placer tes éléments dans la grille) :
Démonstration : https://codepen.io/raphaelgoetter/pen/LYYEBYw?editors=1100
Bonne journée
Ce que tu fais est parfait, cela fonctionne bien (mais il ne faut pas oublier de placer tes éléments dans la grille) :
.grid-container {
display: grid;
grid-template-areas:
"header header header header"
" . aside content . "
"footer footer footer footer";
grid-template-rows: 400px 1fr 100px;
grid-template-columns: 1fr 300px minmax(300px, 900px) 1fr;
height: 100vh;
gap: 1rem;
}
header {
grid-area: header;
}
aside {
grid-area: aside;
}
content {
grid-area: content;
}
footer {
grid-area: footer;
}
Démonstration : https://codepen.io/raphaelgoetter/pen/LYYEBYw?editors=1100
Bonne journée
Salut,
La pour le coup au milieu tu peux avoir 300px + 900px donc 1200px max. Si ton aside doit faire 300 et qu'au total il faut 980px c'est plutot 630px qu'il fait prendre pour le content non ?
Sinon et bien ça devrait le faire comme ça. Qu'est-ce qui ne marche pas ?
a écrit :
une grille simple avec un header et un footer à 100vw et le reste à max 980px.
[...]
grid-template-columns: 1fr 300px minmax(300px, 900px) 1fr;
La pour le coup au milieu tu peux avoir 300px + 900px donc 1200px max. Si ton aside doit faire 300 et qu'au total il faut 980px c'est plutot 630px qu'il fait prendre pour le content non ?
Sinon et bien ça devrait le faire comme ça. Qu'est-ce qui ne marche pas ?