Is utilizing a media query the sole solution for keeping itemX and itemY in the same cell on each device? Are there any native CSS grid methods that could achieve the same result?
Feel free to check out the demonstration on the following fiddle: https://jsfiddle.net/forusak/ctg3auh0/
.container {
display: grid;
grid-template: repeat(10, auto) / repeat(auto-fit, minmax(250px, 1fr));
column-gap: 30px;
color: white;
}
.container>* {
background-color: #b90011;
border: 1px solid black;
padding: 5%;
height: 20px;
}
.item1 {
grid-row: 1 / 10;
height: auto;
}
/* Comment out the section below to observe the lack of mobile responsiveness */
.itemX,
.itemY {
grid-area: 3 / 2 / 3 / 2;
width: 40%;
}
.itemY {
margin-left: auto;
}<div class="container">
<div class="item1"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="itemX"> itemX </div>
<div class="itemY"> itemY </div>
<div class="item"> </div>
<div class="item"> </div>
</div>