Change order of grid items on smaller screens - html

Question

I am trying to use a media query so that once my layout gets below 800px wide, it goes into one column with the relevant description underneath the image.
But the order is incorrect and I get the images first and then the descriptions.
Where am I going wrong?
.container {
display: grid;
grid-template-columns: 2fr 1fr;
}
.one img {
height: 100%;
width: 100%;
object-fit: cover;
}
.two img {
height: 100%;
width: 100%;
object-fit: cover;
}
.three {
padding: 20px;
background: wheat;
}
.four {
padding: 20px;
background: gray;
}
#media only screen and (max-width: 900px) {
.container {
display: grid;
grid-template-columns: 1fr;
}
}
<div class="container">
<div class="one">
<img src="https://picsum.photos/id/600/600/300">
</div>
<div class="two">
<img src="https://picsum.photos/id/600/601/300">
</div>
<div class="three">
This is the description for the first image
</div>
<div class="four">
This is the description for the second image
</div>
</div>

Answer 1

By default the grid items will be place one below the other (as per the order the grid items appear in the markup) if you specify grid-template-columns: 1fr. You can use grid-row: 2 to the description to the first image (three) - this places it correctly.
See demo below:
.container {
display: grid;
grid-template-columns: 2fr 1fr;
}
.one img {
height: 100%;
width: 100%;
object-fit: cover;
}
.two img {
height: 100%;
width: 100%;
object-fit: cover;
}
.three {
padding: 20px;
background: wheat;
}
.four {
padding: 20px;
background: gray;
}
#media only screen and (max-width: 900px) {
.container {
display: grid;
grid-template-columns: 1fr;
}
.three {
grid-row: 2; /* added */
}
}
<div class="container">
<div class="one">
<img src="https://picsum.photos/id/600/600/300">
</div>
<div class="two">
<img src="https://picsum.photos/id/600/601/300">
</div>
<div class="three">
This is the description for the first image
</div>
<div class="four">
This is the description for the second image
</div>
</div>

Answer 2

From my comment and maybe not the kind of answer you look for ( I was waiting for a feed back, so i go with the idea ... too long to be just a comment).
When you run your HTML witout style, img and description do not match.
You could use figure and figcaption to describe the content and link image with its description , img and description in the same container is enough , a div + a p is fine too.
Default, will let them stack on top of each others, this is what you expect when the screen is less than 900px wide. nothing to do there .
You need to mind when it is wider.that's where your mediaquerie comes usefull.
Here is the demo of the coding idea :
/* commun style */
img {
box-sizing:border-box;
display:block;
width: 100%;
height: 100%;
object-fit: cover;
padding: 1em 1em 0 1em ;
}
figure figcaption{
display:block;
margin:0 1em;
background: wheat;
}
figure:nth-child(even) figcaption{
background:gray
}
/* reordering visual layout when window is wider than 900px */
#media only screen and (min-width: 901px) {
/* grid , what you want to use */
.container {
display:grid;
grid-template-columns:2fr 1fr;
}
/* not the best , we will try to make figure side by side looking like 2 rows .... */
figure {
display:flex;
flex-direction:column;
}
/* to fake the rows, trying to set heights each should fill */
img {
flex:10
}
/* works for about 2 1em lines, then visual breaks */
figcaption {
flex:1
}
/* use of supports in case browser is able to get rid of figure in the way for the grid sytem set on container, This your initial idea, to use the grid model for img and text and draw a grid with cell alignement */
#supports (display:contents) {
figure {
display:contents
}
img {
grid-row:1;
}
}
}
<div class="container">
<figure>
<img src="https://picsum.photos/id/600/600/300">
<figcaption>
This is the description for the first image<br>another line
</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/id/600/601/300">
<figcaption>
This is the description for the second image
</figcaption>
</figure>
</div>
A different structure and the use of display:contents is surely not what you expected , i hope it brings you to learn something instead your answer. See links to usefull ressources below.
The codepen to play with : https://codepen.io/gc-nomade/pen/EJBmee
about display :
https://css-tricks.com/get-ready-for-display-contents/
The issue is that the only way for elements to participate in the same CSS grid together (or flexbox for that matter) is for them to be siblings. So, in some cases we might be incentivized to forego HTML semantics for the benefit of layout (not great).
One answer to this is display: contents;—a magical new display value that essentially makes the container disappear, making the child elements children of the element the next level up in the DOM.
about figure :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
The HTML <figure> (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (<figcaption>) element. The figure, its caption, and its contents are referenced as a single unit.
about #supports :
https://developer.mozilla.org/en-US/docs/Web/CSS/#supports
The #supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

Answer 3

The elements in one column are showing up in the order they appear in your code. You have not created any reason for them to appear in any other order.
You could re-order the HTML so they appear in your preferred order.
Or, here's one CSS method – using grid-template-areas – that may work for you:
.container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas: "one two"
"three four";
}
.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.three {
padding: 20px;
background: wheat;
}
.four {
padding: 20px;
background: gray;
}
#media only screen and (max-width: 900px) {
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "one"
"three"
"two"
"four";
}
}
<div class="container">
<div class="one">
<img src="https://picsum.photos/id/600/600/300">
</div>
<div class="two">
<img src="https://picsum.photos/id/600/601/300">
</div>
<div class="three">
This is the description for the first image
</div>
<div class="four">
This is the description for the second image
</div>
</div>