I am using css grid and I am experiencing a weird issue.
As you can see in the code below. I have a parent grid, homepage__section__medical-types__content
which declares the
grid-template-areas:
"blue"
"content1"
"green"
"content2";
and four rows. content1 and content2 are assigned respectively to:
homepage__heading__info:first-child
and
homepage__heading__info:nth-child(2)
but why are they displayed in reverse order as they are declared? What am I doing wrong?
body {
margin: 0;
display: flex;
justify-content: center;
}
.container {
background-color: lavenderblush;
height: auto;
width: 320px;
}
.homepage__section__medical-types {
display: grid;
grid-template-areas: ". medic .";
grid-template-columns: 48px 1fr 16px;
}
.homepage__section__medical-types__content {
grid-area: medic;
display: grid;
grid-template-areas:
"blue"
"content1"
"green"
"content2";
grid-template-rows: 250px 1fr 250px 1fr;
}
.homepage__heading-box {
height: 100%;
border-radius: 25px;
}
.homepage__heading-box--blue {
grid-area: blue;
background-image: linear-gradient(to bottom, #669DD6, #ADDAF1);
}
.homepage__heading-box--green {
grid-area: green;
background-image: linear-gradient(to bottom, #51CEA2, #97DCC6);
}
.homepage__heading__info {
background-color: aliceblue;
}
.homepage__heading__info:first-child {
grid-area: content1;
}
.homepage__heading__info:nth-child(2) {
grid-area: content2;
color: red
}
<div class="container">
<div class="homepage__section__medical-types">
<div class="homepage__section__medical-types__content">
<div class="homepage__heading-box homepage__heading-box--blue"></div>
<div class="homepage__heading__info">
<p>1</p>
</div>
<div class="homepage__heading-box homepage__heading-box--green"></div>
<div class="homepage__heading__info">
<p>2</p>
</div>
</div>
</div>
</div>
EDIT: I have noticed that just commenting out grid-area: content1;
and grid-area: content2;
but keeping the same the parent grid-template-area, the corresponding elements are displayed in the correct order. I am more confused then before.
You are misinterpreting the purpose of the nth-child()
pseudo-class.
To be clear, this is your HTML:
<div class="homepage__section__medical-types__content">
<div class="homepage__heading-box homepage__heading-box--blue"></div>
<div class="homepage__heading__info"><p>1</p></div>
<div class="homepage__heading-box homepage__heading-box--green"></div>
<div class="homepage__heading__info"><p>2</p></div>
</div>
And this is your CSS:
.homepage__heading__info:first-child {
grid-area: content1;
}
.homepage__heading__info:nth-child(2) {
grid-area: content2;
color: red
}
So, :first-child
applies to the first child among all siblings. .homepage__heading__info
is never the first child among all siblings. So with :first-child
applied, it is simply ignored. If you search for this selector in dev tools, it doesn't even appear, because its target doesn't exist.
With .homepage__heading__info:nth-child(2)
, this actually applies to the second child among all siblings, which happens to be the first .homepage__heading__info
(the item with text "1"). The selector applies grid area "content2" to this element, sending it to the bottom, as per grid-template-areas
.
grid-template-areas:
"blue"
"content1"
"green"
"content2"
The element with text "2" is auto-placed in the unoccupied row, which happens to be row 2 (again, content1
doesn't exist). As a result, 2 comes before 1.
EDIT: I have noticed that just commenting out
grid-area: content1
andgrid-area: content2
but keeping the same the parentgrid-template-area
, the corresponding elements are displayed in the correct order. I am more confused then before.
Without the grid areas, the algorithm places the specified items per grid-template-areas
(in this case, that would be only "blue" and "green") and the remaining items are auto-placed into existing rows in source order.