Place Items practice


by Jeremy Caudle
code

Andy Bell shared info about the place-item property in a tweet recently. I had never heard of it, but it is quite handy and wanted to try it out. I wish I had better content within the example, but this should help me remember to use it.

Header One

Header Two

This text isn't meant to be much more than filler.

This text isn't meant to be much more than filler.

View the code:

HTML and JS 
<div class="codedoodle-block">
			
			<h1 class="one">Header One</h1>
			<h1 class="two">Header Two</h1>
			<div class="three"><p>This text isn't meant to be much more than filler.</p></div>
			<div class="four"><p>This text isn't meant to be much more than filler.</p></div>

</div>
CSS 
.codedoodle-block {
			padding: 1rem;
			margin: 2rem auto;
			background-color: gray;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(3, 1fr);
			grid-gap: 1rem;
			max-width: 320px;
			border: solid 1px rgba(0, 0, 0, 0.25);
			place-items: center;
			text-align: center;
		}		
		
		
		.one {
			grid-column: 2 / 4;
			grid-row: 1 / 2;
			font-size: 1.25rem;
			color: blue;
			background-color: green;
		}
		
		.two {
			grid-column: 0 / 1;
			grid-row: 2 / 3;
			font-size: 1.25rem;
			color: blue;
			background-color: gray;
		}
		
		.three {
			grid-column: 1 / 4;
			grid-row: 3 / 4;
				}
		
		.four {
			grid-column: 2 / 3;
			grid-row: 4 / 5;
		}

Tags