Grid Area Adjustments: Combo Classes Quirk

Design help Layout & Design
1

Hello ! :wave:

Areas are a great option for ensuring precise design and a time saver! :fire:
I love to use them but now I have to manage with them for my different layouts and…

I have a question, though. How do you handle areas for responsive designs? According to this official resource linked below, combo classes are supposed to support Grid area adjustments, but in reality, they don’t seem to be supported.

=> You can always utilize combo classes if you need to tweak a grid area for a specific instance.

However, when attempting to add a combo class and modify certain areas, a message pops up stating: “areas can’t be modified on combo class or tag selectors,” which seems rather odd.

Did I miss something?

2

hi @Evadz I have no idea what are you trying achieve but did you study how CSS Grid and template-grid-areas (GTA) actually works?

Another thing IMO disadvantage is that WF using for multiple classes in general “combinators” (combo classes) instead of several independent “selectors” and that is a huge difference.

Anyway, why you would like to create combo class when changing size and position of GTA.

Let say you have section you give a class my-hero-grid and inside you would like to have 4 cells in row and on tablet 4 cells in 2 rows

  1. Let set my-grid to have 2 cols and 1 row as init.
  2. Now set up 4 GTA in CSS Grid
.my-hero-grid{
   grid-template-areas: 'intro img img img';
}

Now we have an idea about init layout: Intro (text) will be in first cell and image in 3 cells.

  1. for tablet we use media query:
@media (max-width: 768px){
.my-hero-grid{
   grid-template-areas: ' . intro intro . '
                        'img img img img';
   }
}

With this we tell CSS that on tablet the intro will take row 1 and 2 cells (first and last get ignored) and image will occupy row 2 and 4 cells.

So you can see you do not need combo-class to change Grid layout.

  1. Now let place header and image into desired areas

.hero-intro__c {
   grid-area: intro;
   /* other stuff */
}

.hero-img {
   grid-area: img
 /* other stuff */
}

that’s it

Now you would like to use my-hero-grid on several pages but with different background.

This is the time to set up combinators you can use.

.bg-black{
   background-color: #000000;
}
.bg-red{
   background-color: #f59895;
}

Now you can add second class as combinator to your my-hero-grid

In WF if you have combinators assigned you can always step up in Style → “inheriting” and select element you need to adjust in this case my-hero-grid

All done

Be aware that I’m using CSS to show how it should work outside of WF as I know there were not really issues but WF workflow with CSS Grid was unusual. I do not know if they changed or if it is still “WF way”.

Hope this very simplified principle example will give you an idea how to think about CSS grid and GTA. I will suggest to take some classes on CSS Grid to get it under skin.

Good luck