Hi all,
I’m not sure I understand something correctly at around Step 66 of the Magazine project (although it’s not about solving a specific step) and would be most grateful for any feedback or input from the community, thanks in advance and apologies for the long post.
It seems to me that the CSS Grid overrides the “column-width” property in one of the sections (specifically the 3rd section). To provide some background, there are 3 sections in this project:
<section class="heading">
<section class="text">
<section class="text text-with-images">
.text
applies to both the 2nd and 3rd sections, but it doesn’t seem like everything from .text
is being applied to the 3rd section.
For example in .text we have the following:
.text {
grid-column: 2 / 3;
}
…which is applied to the 3rd section and this makes sense.
The 2nd section doesn’t have a grid, instead it has:
.text {
column-width: 25rem;
}
…and the browser calculates how many columns can fit in the space available. This works fine for the second section (3 columns appear).
Where it gets tricky is in the 3rd section, we create a CSS Grid with the following:
.text-with-images {
display: grid;
grid-template-columns: 1fr 2fr;
}
This is where I’m not sure I understand what’s going on. The 3rd section seems to take:
.text {
grid-column: 2 / 3;
}
…but ignores:
.text {
column-width: 25rem;
}
…and instead of having “column-width”, it overrides it with:
.text-with-images {
display: grid;
grid-template-columns: 1fr 2fr;
}
Is this in fact what is happening? Does a CSS Grid have priority over “column-width”? Sorry for the long post and the amount of repetition. Any feedback would be greatly appreciated, thank you.