<item>
<h2 class='title'>
TITLE
</h2>
<video-item>
<img src="https://placehold.it/1600x1100">
</video-item>
<overview>
<p>CONTENT</p>
<button class='show-more'>Read more</button>
</overview>
</item>
This is the default structure for items in the code.
https://i.sstatic.net/9KDWD.png
When reaching a certain screen size, I aim for this layout:
https://i.sstatic.net/4VGGd.png
However, my thinking is still rooted in flexbox principles. I want the first 'column' to align towards the start like flex-start.
Notice how the longer text occupies the space in the initial item, while the shorter text in the second example remains compact.
I believe that this alignment relates to the "block axis" as mentioned in this documentation.
@media (min-width: 800px) {
item {
display: grid;
grid-template-columns: [content] 1fr [visual] 1fr;
/* SPECIFIC POSITION */
}
.title, overview {
grid-column: content;
}
video-item {
grid-column: visual;
grid-row: 1/3;
}
}
I experimented with `grid-area` but reached the same outcome.
While this approach differs from using flexbox, I am confident that what I envision can be achieved through CSS grid - it's just a matter of learning the syntax. ; )
https://i.sstatic.net/8Mp7m.png
UPDATE @Temani Afif's suggestion has shed light on the concept - here are additional images to further clarify.
https://i.sstatic.net/Xz2Ib.png
By not explicitly defining a `grid-template-rows` on the parent element, it will automatically adjust based on the grid-row setting of the child... resulting in an extra row being created to accommodate any excess content set as 'auto'. Another method would be to specify `1/4` or `span 100`. Alternatively, you could define additional rows explicitly with areas, among other approaches.