min content max content practice


by Jeremy Caudle
code

I rewatched a Layout Land video on min-content and max-content and wanted to do a quick refresher.

Jeremy Caudle

testing out min-content and max-content

This is a paragraph that fits within a column that is sized to 1 fr. This is a paragraph that fits within a column that is sized to 1 fr. This is a paragraph that fits within a column that is sized to 1 fr. This is a paragraph that fits within a column that is sized to 1 fr. This is a paragraph that fits within a column that is sized to 1 fr.

View the code:

HTML and JS 
<div class="codedoodle-block">
			<h1>Jeremy Caudle</h1>
			<h2>testing out min-content and max-content</h2>
			<p>This is a paragraph that fits within a column that is sized to 1 fr. This is a paragraph that fits within a column that is sized to 1 fr. This is a paragraph that fits within a column that is sized to 1 fr. This is a paragraph that fits within a column that is sized to 1 fr. This is a paragraph that fits within a column that is sized to 1 fr.</p>
			<aside>
				<p>This is a paragraph that fits within a column that is sized to min-content.</p>
			</aside>
		</div>
CSS 
.codedoodle-block {
			display: grid;
			grid-template-columns: max-content max-content 1fr min-content;
			grid-gap: 2rem;	
		}
		
		.codedoodle-block h1 {
			font-size: 4rem;
			padding: .5rem;
			color: green;
			grid-column: 1 / span 1;
			grid-row: 1 / 2;
			text-align: left;
			margin: 0;
		}
		
		.codedoodle-block h2 {
			color: gray;
			font-size: 1.5rem;
			padding: .25rem;
			grid-column: 1 / span 1;
			grid-row: 2 / 3;
			margin: 0;
		}
		
		.codedoodle-block p {
			grid-column: 3 / span 1;
			grid-row: 2 / 4;
		}
		
		.codedoodle-block aside {
			border: solid 3px #000000;
			padding: .25rem;
			grid-column: 4 / span 1;
			grid-row: 3 / span 1;
		}

Tags