Aimless Grid and Flexbox Practice


by Jeremy Caudle
code

I was working a bit aimlessly today while trying to put something together that seemed interesting. I did not succeed, but I got some more practice in with grid and flexbox.

List with dates

  • Item

    Text about the item that is meant to provide additional information.

    2020July29

  • Item

    Text about the item that is meant to provide additional information.

    2020July29

View the code:

HTML and JS 
<div class="codedoodle-block">
			<h1>List with dates</h1>
			<ul>
				<li>
					<h2>Item</h2>
					<p>Text about the item that is meant to provide additional information.</p>
					<h3 class="date"><span class="year">2020</span><span class="month">July</span><span class="day">29</span></h3>
				</li>
				<li>
					<h2>Item</h2>
					<p>Text about the item that is meant to provide additional information.</p>
					<h3 class="date"><span class="year">2020</span><span class="month">July</span><span class="day">29</span></h3>
				</li>
			</ul>
						
		</div>
CSS 
.codedoodle-block {
			padding: 1rem;
			margin: 2rem auto;
			display: block;
			max-width: 60em;
			font-family: Gotham, 'Helvetica', sans-serif;
		}
		
		.codedoodle-block ul {
			display: block;
			padding: 0;
			list-style: none;
			margin: 1rem 0;
		}
		
		.codedoodle-block li {
			display: grid;
			grid-template-columns: min-content 1fr;
			grid-template-rows: 2rem 2rem;
			grid-gap: 1rem;
			border: solid 2px red;
			margin-bottom: 1rem;
		}
		
		.codedoodle-block ul li h2 {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			margin: 0;
		}

		.codedoodle-block ul li p {
			grid-column: 2 / 3;
			grid-row: 2 / 3;	
			margin: 0;
		}
		
		.codedoodle-block ul li h3 {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-gap: .25rem;
		margin: 0;
		background-color: #00000022;
		padding-right: .375rem;
		}				
		
		.year {
			writing-mode: vertical-lr;
			grid-column: 1 / 2;
			grid-row: 1 / 3;
			font-size: 2rem;
			transform: rotate(180deg);
			background: red;
			color: white;
			display: flex;
			justify-content: center;
			align-content: center;
			text-align: center;
		}
		
		.month {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			color: red;
			text-transform: uppercase;
			display: flex;
			height: 100%;
			flex-flow: column;
			justify-content: center;
			align-content: center;
			text-align: center;
		}
		
		.day {
			grid-column: 2 / 3;
			grid-row: 2 / 3;
			display: flex;
			height: 100%;
			width: 100%;
			flex-flow: column;
			justify-content: center;
			align-content: center;
			text-align: center;
			font-size: 2.5rem;
		}

Tags