CODEWITHSUNDEEP
htmlcsscss-grid
Ypselon
Ypselon

Reputation: 142

Preventing grid cells with the same name from stacking

I'm currently working on a project where I want to display information like a grid and I'm wondering if there is a better solution to achieve the behavior that I want.

So I basically want to display the grid like I do in my CSS:

.comparer__data {
  display: grid;
  grid-template-areas: 
      ".   img   img   ."
      ".   title title ."
      "key value value value"
      "key value value value"
      "key value value value";
}

<div class="comparer">
  <div class="comparer__data">
    <img src="" alt="" class="comparer__image">
    <img src="" alt="" class="comparer__image">
    <h1 class="comparer__title">Title1</h1>
    <h1 class="comparer__title">Title2</h1>
    <h2 class="comparer__key">Key1</h2>
    <h2 class="comparer__key">Key2</h2>
    <h2 class="comparer__key">Key3</h2>
    <h3 class="comparer__value">Value1_1</h3>
    <h3 class="comparer__value">Value1_2</h3>
    <h3 class="comparer__value">Value1_3</h3>
    <h3 class="comparer__value">Value2_1</h3>
    <h3 class="comparer__value">Value2_2</h3>
    <h3 class="comparer__value">Value2_3</h3>
    <h3 class="comparer__value">Value3_1</h3>
    <h3 class="comparer__value">Value3_2</h3>
    <h3 class="comparer__value">Value3_3</h3>
  </div>
</div>

The only solution that comes to my mind is to give each of them a different area number and add the number in the template, but this would result in a lot of redundancy. Like this:

.comparer__data {
    display: grid;
    grid-template-areas: 
        ".    img1   img2   ."
        ".    title1 title2 ."
        "key1 value1 value4 value7"
        "key2 value2 value5 value8"
        "key3 value3 value6 value9";
 }

So, is there a better way to do this with a grid? Can I say the grid that it should not stack the elements but instead place them in the next cell which is labeled the same?

Thanks, Ypselon

Upvotes: 0

Views: 73

Answers (2)

vals
vals

Reputation: 64174

You can get the result asked using auto placement for the values, and only column placement for the key.

The only trick needed is to use pseudos as filler to keep the empty cells empty

.comparer__data {
  display: grid;
  grid-template-areas: 
      "filler1   img1   img2   filler2"
      "filler1 title1 title2 filler2"
      "key    value  value  value"
      "key    value  value  value"
      "key    value  value  value";
   grid-auto-flow: dense;
}


.comparer__data:before {
    content: "f1";
    grid-area: filler1;
}
.comparer__data:after {
    content: "f2";
    grid-area: filler2;
}
.comparer__key {
    grid-column: key-start;
}
<div class="comparer">
  <div class="comparer__data">
    <div class="comparer__image1">IMAGE</div>
    <div class="comparer__image2">IMAGE</div>
    <h1 class="comparer__title1">Title1</h1>
    <h1 class="comparer__title2">Title2</h1>
    <h2 class="comparer__key">Key1</h2>
    <h2 class="comparer__key">Key2</h2>
    <h2 class="comparer__key">Key3</h2>
    <h3 class="comparer__value">Value1_1</h3>
    <h3 class="comparer__value">Value1_2</h3>
    <h3 class="comparer__value">Value1_3</h3>
    <h3 class="comparer__value">Value2_1</h3>
    <h3 class="comparer__value">Value2_2</h3>
    <h3 class="comparer__value">Value2_3</h3>
    <h3 class="comparer__value">Value3_1</h3>
    <h3 class="comparer__value">Value3_2</h3>
    <h3 class="comparer__value">Value3_3</h3>
  </div>
</div>

Upvotes: 1

Riri
Riri

Reputation: 61

Your grid-template-areas can stay as is, but you have to group your HTML elements by area. Under the comparer__data element you can have four wrappers: one for the images, one for the titles, one for the keys, and one for the values.

Upvotes: 1

Related Questions