28172 sujets

CSS et mise en forme, CSS3

Un petit coup de main sur les Grid Layout

Bonjour,

Suite à la lecture du livre de Raphaël sur le sujet des Grid Layout, j'essaye de mettre en place quelque chose de simple. Mais je n'arrive pas au résultat attendu.

<header>
  <h1>Mon logo</h1>
</header>

<main>
  <aside>
    <nav>Menu</nav>
  </aside>
  <section>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae aspernatur quam, autem error sint consequatur perferendis magnam qui expedita doloremque sit facere totam iusto aliquam optio dolore reprehenderit debitis voluptates.
    </p>
  </section>
</main>

<footer>
  <nav>
    Footer
  </nav>
</footer>


et le CSS

body {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
}

main {
  display: grid;
  grid-template-columns: 8rem 1fr;
}

header {
  background-color: teal;
}

aside {
  background-color: steelblue;
}

main {
  background-color: springgreen;
}

footer {
  background-color: slategray;
}


J'aimerais que le main prenne toute la hauteur, auriez-vous la réponse stp ?

Merci Smiley smile
Bonjour,
tu n'as sans doute pas encore digéré totalement le livre de Raphaël, parce qu'il y a pas mal de mélanges, rien que dans ton html. En principe, on ne met pas le menu dans le aside, ça fonctionne, mais d'un point de vue sémantique, ce n'est pas le pied. Pour le css, il est inutile de repréciser display: grid; pour main, après l'avoir fait pour body. Tous les enfants seront grid, de toute façon. Il faut, dans le css, définir les row et column des différentes sections. Il y beaucoup à dire. Pour le main, s'il est en auto, il faut le remplir. Sinon, il faut lui donner une dimension, en em, comme sur le modèle. Et ne pas oublier mini-height: 100vh; pour occuper tout. Juste un petit aperçu, rapidement, je ne sais pas si c'est ce que tu veux, c'est une ébauche. C'est du rapidement fait, à revoir pour les détails, mais si ça peut t'aider. Attention, c'est mélangé, ne recopie pas sans structurer.

body {
  display: grid;
  grid-template-rows: 5em 40em 1fr;
  grid-template-columns: 8rem 1fr;
  min-height: 100vh;
}
header {
  background-color: teal;
  grid-column: 2 / span 2;
  grid-row: 1;
}
aside {
  background-color: steelblue;
  grid-column: 1;
  grid-row: 1 / span 2;
}
main {
  background-color: springgreen;
  grid-column: 2 / 2;
  grid-row: 2 ;
}
footer {
  background-color: slategray;
  grid-column: 1 / span 2;
  grid-row: 3;
}



<header>
  <h1>Mon logo</h1>
</header>

  <aside>
    <nav>Menu</nav>
  </aside>
  <main>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae aspernatur quam, autem error sint consequatur perferendis magnam qui expedita doloremque sit facere totam iusto aliquam optio dolore reprehenderit debitis voluptates. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae aspernatur quam, autem error sint consequatur perferendis magnam qui expedita doloremque sit facere totam iusto aliquam optio dolore reprehenderit debitis voluptates. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae aspernatur quam, autem error sint consequatur perferendis magnam qui expedita doloremque sit facere totam iusto aliquam optio dolore reprehenderit debitis voluptates. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae aspernatur quam, autem error sint consequatur perferendis magnam qui expedita doloremque sit facere totam iusto aliquam optio dolore reprehenderit debitis voluptates. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </p>
</main>
<footer>
    Footer
</footer>

Modifié par Bongota (24 Apr 2020 - 14:44)
Meilleure solution
Merci pour ta réponse, j'ai supprimé le aside pour avoir directement le nav, effectivement merci de la précision. Par contre il me manquait qu'une valeur min-height: 100vh; dans le body.
Tu dois structurer tout ça et revenir, si possible avec un lien. Beaucoup pourront t'aider, ici.
Le header, c'est un header, pas un titre. En principe, h1 ne le concerne pas, il concerne le premier titre des paragraphes.
Sujet clos
Aller à