28172 sujets

CSS et mise en forme, CSS3

[Résolu] Css Grid Debordement de contenu

Bonjour,
En dessous d'une certaine largeur , le contenu déborde de son container.
Et j'ai eu beau chercher, je ne vois pas comment corriger cela.
Cordialement

upload/1639125930-831-capture02.jpg
upload/1639125954-831-capture01.jpg
Le code Html

<div class="blockgroup">
		<section class="grid-content">
		
			<div class="col-content"><p>Full-Left</p></div>
			<div class="col-content"><p>Wide-Left</p></div>
			<div class="col-content content"><p>Content</p></div> 
			<div class="col-content"><p>Wide-Right</p></div>
			<div class="col-content"><p>Full-Right</p></div>
			
		</section>
	</div>
	
	<div class="blockgroup">
		<section class="grid-content">
		
			<div class="col-content"><p>Full-Left</p></div>
			<div class="col-content"><p>Wide-Left</p></div>
			<div class="col-content left"><p>Left</p></div> 
			<div class="col-content middle"><p>Middle</p></div>
			<div class="col-content right"><p>Right</p></div>
			<div class="col-content"><p>Wide-Right</p></div>
			<div class="col-content"><p>Full-Right</p></div>
			
		</section>
	</div>

	<main class="wrapper">
		<div class="grid-container">
		
			<div class="blockgroup">
				<section class="grid-content">	
				
					<div class="col-content"><p>Full-Left</p></div>
					<div class="col-content"><p>Wide-Left</p></div>
					<div class="col-content left"><p>Left</p></div> 
					<div class="col-content middle"><p>Middle</p></div>
					<div class="col-content right"><p>Right</p></div>
					<div class="col-content"><p>Wide-Right</p></div>
					<div class="col-content"><p>Full-Right</p></div>
					
				</section>
			</div>
			
			<div class="blockgroup">
				<section class="grid-content">	
				
					<div class="col-content"><p>Full-Left</p></div>
					<div class="col-content"><p>Wide-Left</p></div>
					<div class="col-content left"><p>Left</p></div> 
					<div class="col-content middle"><p>Middle</p></div>
					<div class="col-content right"><p>Right</p></div>
					<div class="col-content"><p>Wide-Right</p></div>
					<div class="col-content"><p>Full-Right</p></div>
					
				</section>
			</div>
			
		</div><!-- /.inner-wrapper -->
	</main><!-- /.wrapper -->

Et le code Css

.grid-body,
.grid-container,
.grid-content {
	
	--gutter: 1rem;	   	/* column-gap */	
	--spacing: 1.5rem; 	/* row-gap */ 
	
	display: grid;
	column-gap: var(--gutter);				
	row-gap: var(--spacing);

	grid-template-columns:		
	/* Marges externes gauche */
	[full-start] 
		var(--margin-full)								
	[wide-start] 
		var(--margin-wide) 
	/* Zone de contenu */
		var(--layout-content)
	/* Marges externes droite */
		var(--margin-wide) 
	[wide-end]
		var(--margin-full)
	[full-end];		
}

.grid-body,	
.grid-container {
	/* largeurs des marges externes */	
	--margin-full: minmax(0, 1fr);
	--margin-wide: minmax(0, 1fr);
		
	/* layout pour le contenu entre les marges externes */
	--layout-content:
		[content-start left-start left-end main-start]
			minmax(auto, 650px)				
		[main-end right-start right-end content-end];
}

.grid-body > *,	
.grid-container > * {
	grid-column: 1 / -1;
}

.grid-body {
	grid-template-rows: auto auto 1fr;
}

.grid-content {
	/* largeurs des marges externes */	
	--margin-full: minmax(0, 1fr);
	--margin-wide: minmax(0, 1fr);
		
	/* layout pour le contenu entre les marges externes */
	--layout-content:
		[content-start left-start]
			4fr
		[left-end main-start]
			minmax(auto, 650px)
		[main-end right-start]
			4fr
		[right-end content-end];
}

Modifié par cpalo (11 Dec 2021 - 19:07)
Modérateur
Hello,
Est-ce que ce n'est pas simplement à cause de ton minmax pour lequel tu donnes 0 comme valeur de min? Tu pourrais à mon avis avoir une valeur du genre min-content? (ou même une valeur fixe et pas un minmax).
Smiley smile
Voilà je pense avoir trouvé, après de nombreux successifs et progressifs.
A priori-c'est un problème de padding.

.col-content,
.block {			
    /* padding: 8px; */
    overflow: hidden;			
}
.left,
.middle,
.right,
.content {			
    padding: 8px;
}

Et effectivement

--margin-full: minmax(max-content, 1fr);
--margin-wide: minmax(max-content, 1fr);

ne fonctionne pas si on a 0 au lieu de max-content ( conserve la valeur minimale de 2 padding)
Modifié par cpalo (10 Dec 2021 - 18:26)
Meilleure solution
Modérateur
bonjour,

min-content fonctionne aussi en permettant aux contenus de faire des retours à la ligne en se basant sur le mot le plus long ou autre élément en ligne le plus large.

cdt
Sujet clos
Aller à