Step Three of @IndieWebCamp Online: CSS Grid of Poetry page done and ready for testing
I have to run a quick errand. Hoping to finish for first demo time but may have to keep trucking until the second demo window. I didn't define rows for my poetcircle and reads, I wonder if I will need to do something so one starts after the author with my rows implictly calculated:
updated: fixed an error in grid-columns
.longreads article {
font-family: 'Heebo', sans-serif;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.longreads article .audiopoem {
object-fit: cover;
width: 100%;
max-height: 100%;
text-align:center;
margin-bottom:.3em;
grid-column: 1 / 3;
}
.longreads article .smallpoems {
grid-column: 3 / 4;
grid-row-start: 6;
}
.longreads article .backstage {
grid-column: 5 / 6;
grid-row-start: 6;
}
.longreads article .poetcircle {
grid-column: 5 / 6;
grid-template-rows: 1/5;
}
.longreads .poemreads {
grid-template-columns: 5 / 6;
}


