Quick Grid Practice


by Jeremy Caudle
code

Just a quick bit of grid practice today.

Text goes here
Text goes here
Text goes here
Text goes here
Text goes here
Text goes here
Text goes here
Text goes here
Text goes here
Text goes here
Text goes here
Text goes here
Text goes here
Text goes here
Text goes here

View the code:

HTML and JS 
<div class="codedoodle-block">
			<section class="wii">
<div>Text goes here</div>
<div>Text goes here</div>
<div>Text goes here</div>
<div>Text goes here</div>
<div>Text goes here</div>
			
<div>Text goes here</div>
<div>Text goes here</div>
<div>Text goes here</div>
<div>Text goes here</div>
<div>Text goes here</div>

<div>Text goes here</div>
<div>Text goes here</div>
<div>Text goes here</div>
<div>Text goes here</div>
<div>Text goes here</div>			
</section>
		</div>
CSS 
.codedoodle-block {
			padding: 1rem;
			margin: 2rem auto;
			background-color: #eeeeee;
			max-width: 320px;
		}
		
		.codedoodle-block div {
			display: flex;
			justify-content: center;
			align-content: center; 
		}
		
		.wii {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: repeat(3, 1fr);
		}

Tags