Sunday Random Grid Practice


by Jeremy Caudle
code

I could not conjure up the motivation to make anything special or slightly interesting today, but I did practice more with CSS grid.

Test

Sometimes I cannot quite figure out what to make for these little code doodles. Sometimes it's burnout and sometimes it's my emotional state, but the process of making them eventually leads to something. Are they always useful or worth looking at? Nope, but I need to keep doing them.

View the code:

HTML and JS 
<div class="codedoodle-block">
			<h1>Test</h1>
			<p>Sometimes I cannot quite figure out what to make for these little code doodles. Sometimes it's burnout and sometimes it's my emotional state, but the process of making them eventually leads to something. Are they always useful or worth looking at? Nope, but I need to keep doing them.</p>
			<aside>"Motivational quote should ho here, but I don't have the motivation to find one."<br />—Jeremy Caudle <em>(I know my quotes aren't correct too. :P)</em></aside>
		</div>
CSS 
.codedoodle-block {
			margin: 1rem auto;
			max-width: 30rem;
			background-color: rgba(0, 0, 0, 0.2);
			border-radius: 1rem;
			padding: 1rem;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			justify-items: center;
			align-items: center;
		}
		
		.codedoodle-block h1 {
			font-size: 4rem;
			margin: 0;
			max-width: 100%;
			transform: rotate(-90deg);
		}
		
		.codedoodle-block p {
			grid-column: 2 / 4;
			max-width: 35em;
		}
		
		.codedoodle-block aside {
			grid-column: 1 / 4;
			font-weight: bold;
		}

Tags