Knacss, grid et fluide

Bonjour,
Je commence à utiliser knacss v7 pour un template et je cherche à faire sorte qu'une grille de 4 colonnes s’étale sur toute la largeur... Par très clair.

<section class="grid-1 center">
	<div id="gamme" class="grid-4 has-gutter border-top border-bottom">

		<div class="center border-right border-bottom"> <!-- div que j'aimerais voir s'étaler sur tout la largeur de l'écran diviser par le nombre définit dans le grid, ici 4 -->
			<div class="padding-bottom-10"><a href="http://#12/stadium" title="Stadium" alt="Stadium"><img class="art_thumbnail" src="http://#/stadium/stadium_main.jpg" alt="Stadium" title="Stadium"></a></div>
			<div><h2 class="txtcenter h4-like uppercase">Stadium</h2></div>
		</div>

		<div class="center border-right border-bottom"><!-- div que j'aimerais voir s'étaler sur tout la largeur de l'écran diviser par le nombre définit dans le grid, ici 4 -->
			<div class="padding-bottom-10"><a href="http://#11/hyperlite" title="Hyperlite" alt="Hyperlite"><img class="art_thumbnail" src="http://#/hyperlite/hyperlite_main.jpg" alt="Hyperlite" title="Hyperlite"></a></div>
			<div><h2 class="txtcenter h4-like uppercase">Hyperlite</h2></div>
		</div>

		<div class="center border-right border-bottom"><!-- div que j'aimerais voir s'étaler sur tout la largeur de l'écran diviser par le nombre définit dans le grid, ici 4 -->
			<div class="padding-bottom-10"><a href="http://#10/safey-cage" title="Safety cage" alt="Safety cage"><img class="art_thumbnail" src="http://#/safetycage/fixed-cage_main.gif" alt="Safety cage" title="Safety cage"></a></div>
			<div><h2 class="txtcenter h4-like uppercase">Safety cage</h2></div>
		</div>

		<div class="center border-right border-bottom"><!-- div que j'aimerais voir s'étaler sur tout la largeur de l'écran diviser par le nombre définit dans le grid, ici 4 -->
			<div class="padding-bottom-10"><a href="http://#9/velocity" title="Velocity" alt="Velocity"><img class="art_thumbnail" src="http://#/velocity/velocity_main.jpg" alt="Velocity" title="Velocity"></a></div>
			<div><h2 class="txtcenter h4-like uppercase">Velocity</h2></div>
		</div>
	</div>
</section>

Sur un écran large les div enfants ne prenne par toute la largeur du coups je me retrouve avec des bordures qui ne sont "jointes". Comment faire pour que chaque div enfants occupe tout l'espace disponible et non ce limite à la taille de son contenu ?



Merci d'avance.
Philippe.

Hello,

A priori le problème ne vient pas de KNACSS directement mais de l'ajout de tes classes "center" partout car elles empêchent les div internes de s'étaler.
J'ai fait un test rapide en les supprimant et cela fonctionne chez moi.

Bonne journée

Raphaël

Pafait, c'est bien à cause des center.

J'ai tout viré mais l'image n'est plus centrer dans le div du coups

Philippe

Bonjour,

du même auteur Centrer les éléments ou un site web en CSS fourmille de ressources.

Bonjour,

Merci pour le lien, j'en connaissais la théorie mais j'essaie de faire fonctionner ce qui est présent dans la doc de knacss qui donne en exemple :

<div style="width: 30%" class="center">div.center</div>

https://www.knacss.com/doc.html#alignments

flipflip a écrit :
Merci pour le lien, j'en connaissais la théorie mais j'essaie de faire fonctionner ce qui est présent dans la doc de knacss qui donne en exemple

La classe .center centre l'élément lui-même. Il ne faut pas l'utiliser sur les éléments qui doivent s'élargir.
Par contre tu peux l'utiliser sur les enfants de ces éléments pour les centrer à l'intérieur des parents qui - eux - prennent 1/4 de la place restante.