Grid Layout

jean2

7 Oct 2019 à 18:22

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

jean2

7 Oct 2019 à 18:55

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;
}

Raphael

Administrateur

8 Oct 2019 à 09:14

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

_laurent

Modérateur

8 Oct 2019 à 09:19

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 ?

CSS et mise en forme, CSS3

Grid Layout