Does CSS Grid override the "column-width" attribute? (Magazine project Step 66)

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:

  1. <section class="heading">
  2. <section class="text">
  3. <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.

it doesn’t , the behaviour is dictacted by the “cascade”. (Cascading stylesheets)

So what the browser does will depend on where it sees the style being applied.
(there’s a hierarchy to the interpretation)

for eg. if all your styles are in one stylesheet, the later style will be the most important.

(there are also other rules but that one is the most important to understand when you are learning)

1 Like

Hi hbar1st,

Thanks for the response. Just wanted to clarify, would you say although CSS Grid doesn’t have priority over “column-width” in a general sense, in this project it seems to behave like that simply because:

.text-with-images {
  display: grid;
  grid-template-columns: 1fr 2fr; 
}

…appears later in the stylesheet and as you said the later style will be the most important (since all styles are in one stylesheet)?

Would it be fair to describe the process as follows:

The browser takes the code from .text-with-images (which is more important given it appears later in the stylesheet) and when it looks at .text (which is less important), it only takes the code from .text that doesn’t conflict with the code from .text-with-images?

Therefore,

.text {
  grid-column: 2 / 3;
}

…is taken but not…

.text {
  column-width: 25rem;
}

Thanks again, sorry just wanted some extra clarity, your help is much appreciated.

1 Like

yes correct.

also true

1 Like

That’s awesome, thank you!!!

1 Like

i should say that the ‘cascading’ aspect of CSS is something I sometimes struggle with (the rules are simple but the techniques that designers use online are quite complex).
You can do a lot of fancy work with it!

1 Like