Currently, I am in the process of designing a layout that will work seamlessly on both mobile and desktop devices. On mobile, all elements should stack on top of each other, while on desktop, they should be displayed in two columns. Additionally, the order of elements will vary between mobile and desktop views.
https://i.sstatic.net/zdZvu.jpg My initial idea is to utilize CSS grid for this design.
Here's an example of the HTML structure:
<div class="grid-release">
<div class="gi-cover">cover</div>
<div class="gi-detail">detail</div>
<div class="gi-head">head </div>
<div class="gi-desc">desc</div>
<div class="gi-media">media</div>
<div class="gi-comment">comment</div>
</div>
The corresponding CSS code:
.grid-release {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"head"
"cover"
"detail"
"desc"
"media"
"comment";
grid-gap: 10px;
}
/* Additional styles for grid items */
@media screen and (min-width: 400px) {
.grid-release {
grid-template-columns: 1fr 2fr;
grid-template-areas:
"cover head"
"detail desc"
". media"
". comment";
}
}
To better visualize the result, you can view it here: https://jsfiddle.net/q3hpr0ak/
However, I have encountered some issues with item expansion affecting the layout integrity when viewed on larger screens. There are examples provided below:
Cover expansion impacting head: https://jsfiddle.net/z5jhewhb/1/
Detail expansion affecting desc: https://jsfiddle.net/Lh2y2pzp/2/
This has resulted in a less than desirable visual outcome, leading me to question if CSS grid is the appropriate solution for this project. Any advice or guidance would be greatly appreciated as I've been struggling with this challenge all morning.