28111 sujets

CSS et mise en forme, CSS3

Grid Layout

Bonjour,
nouveau sur grid layout, j'ai acheté le livre de Raphaël (super bien fait), mais je n'arrive pas à comprendre comment faire une grille simple avec un header et un footer à 100vw et le reste à max 980px.
Merci,
Jean
Pour le moment je fais:

.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;
}
Administrateur
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) : 

.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 Smiley smile
Meilleure solution
Modérateur
Salut,

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 ?
Sujet clos
Aller à