28172 sujets

CSS et mise en forme, CSS3

[Résolu] Css GridLayout largeur utile et largeur totale

Bonjour,
une structure "traditionnelle" :

<body>
	<header class="outer-Banner">
		<section class="inner-Banner">
			<h2>Site Header</h2>
		</section>
	</header><!-- /.SiteHeader -->

	<div class="outer-PrimaryNav">
		<nav class="inner-PrimaryNav">
			<h2>Navigation principale du site</h2>
		</nav>
	</div><!-- /.PrimaryNav -->	

	<main class="outer-MainContent">	
		<div class="PageHeader">
			<h1 class="as-pagetitle">Titre de la page</h1>
		</div>
		<section class="inner-MainContent">
			<h2 class="no-visible-avoid-untitled">MainContent</h2> 
		</section>
	</main><!-- /.MainContent -->	

	<footer class="outer-SiteFooter">
		<section class="inner-SiteFooter">
			<h2>Site Footer</h2>
		</section>
	</footer><!-- /.SiteFooter -->
</body>

Suivant qu'on voulait que la zone fasse toute la largeur du viewport ou non , on appliquait la classe useful sur le outer ou sur le inner ( maxwith et margin auto).
Je suis en train de passer mon site avec grid-layout.
Pas de problème pour arriver au même résultat, excepté pour aligner le texte des zones "full-width" ( header, nav, footer) avec le début de la zone "useful-witfh" (content).

upload/1528443474-831-capture01.jpg

Le code css incomplet car je n'ai pas réussi à trouver quoi mettre dans les classes inner- pour arriver à ce résultat , c'est à dire aligner les textes (grid-column-start ?, appliquer la classe useful-width ??)

body {
	min-height: 100%;
	display: grid;
	grid-gap: 1.5rem 0;
	grid-template-areas:
		"header"
		"nav"
		"content"
		"footer";
	grid-template-columns: 1fr;	
	grid-template-rows:
		auto 	/* header */
		auto	/* nav */
		1fr		/* content */
		auto;	/* footer */
}

.outer-Banner 	  { grid-area: header; }
.outer-PrimaryNav { grid-area: nav;}
.outer-MainContent{ grid-area: content; }
.outer-SiteFooter { grid-area: footer; }

[class|="inner"] { display: grid}

@media screen and (min-width: 800px) {
	body {
		grid-template-areas:
			"header header header"
			"nav nav nav"
			". content ."
			" footer footer footer";
		grid-template-columns: 1fr minmax(auto, 1200px) 1fr; 
    }	
	.full-width {
		grid-column: 1 / 4;
	}
	.useful-width {
		grid-column: 2 / 3;
	}	
}

Modifié par cpalo (08 Jun 2018 - 09:46)
Bien sur que cela m'aide surtout que je venais de trouver une astuce.. ( que je vais partager tout à l'heure car là pas trop dispo..)
Effectivement celà peut paraitre un peu "compliqué" pour une mise en page aussi "simple".
Mais là je viens de décider d'abandonner toutes mes "habitudes with float" pour le "grid-layout". Alors je teste pour voir ce que vont être mes "nouvelles habitudes" et comment je vais réussir à reproduire mes "modeles"....
A suivre donc......
Bonjour,
Et oui j'étais parti sur une mauvaise interpretation. Je pensais qu'il fallait que tous les blocs soient des des grid ou des grid-item.
Dans mon layout ce sont les outer- qui sont des grid-item et les inner- des "simples" blocs qu'on peut traiter de la manière qu'on souhaite.
Après un peu plus de pratique, je confirme que les grid-areas c'est assez sympa à utiliser surtout si on présente sa feuille de style en conséquence.
Je mettrai en ligne un exemple lorsque j'aurai réglé un "dernier" ( enfin pour l'instant!) petit point ( cf post sur contenu sidebar restant fixed)
Cordialement
Sujet clos
Aller à