View source for User:DustyFB/Sandbox/Materials/Grid Test

<div class="gridContainer">
<div class="gridTest"><div style="grid-area:name;">[[Bastium]]</div>{{#invoke:Transcluder Test|main|Bastium|extractTemplates=SB Infobox Material Properties Draft}}</div>
<div class="gridTest">{{#invoke:Transcluder Test|main|Bastium|extractTemplates=SB Infobox Material Properties Draft}}</div>
<div class="gridTest">{{#invoke:Transcluder Test|main|Bastium|extractTemplates=SB Infobox Material Properties Draft}}</div>
<div class="gridTest">{{#invoke:Transcluder Test|main|Bastium|extractTemplates=SB Infobox Material Properties Draft}}</div>
<div class="gridTest">{{#invoke:Transcluder Test|main|Bastium|extractTemplates=SB Infobox Material Properties Draft}}</div>
<div class="gridTest">{{#invoke:Transcluder Test|main|Bastium|extractTemplates=SB Infobox Material Properties Draft}}</div>
<div class="gridTest">{{#invoke:Transcluder Test|main|Bastium|extractTemplates=SB Infobox Material Properties Draft}}</div>
<div class="gridTest">{{#invoke:Transcluder Test|main|Bastium|extractTemplates=SB Infobox Material Properties Draft}}</div>
</div>

{{#css:
.gridTest p, .SB-Infobox-Data-Section-Header {
  display:none;
  grid-area: breakrow;
}
.gridTest .SB-Infobox-Cell-Header, .gridTest .SB-Infobox-Cell-Body {
  text-align: center;
  display: initial;
}

.gridTest {
  display:grid;
  grid-template-areas: "name structuralDurability armorRating minArmor penMulti corRes plasticity density";
  grid-row-end: density-end;
  background-color:transparent;
  transition:background-color 0.2s ease;
}

.gridTest .SB-Infobox-Cell-Grid[data-alt="Name"] {
  grid-area: name;
}
.gridTest .SB-Infobox-Cell-Grid[data-alt="Structural durability"] {
  grid-area: structuralDurability;
}
.gridTest .SB-Infobox-Cell-Grid[data-alt="Armor rating"] {
  grid-area: armorRating;
}
.gridTest .SB-Infobox-Cell-Grid[data-alt="Minimum armor"] {
  grid-area: minArmor;
}
.gridTest .SB-Infobox-Cell-Grid[data-alt="Penetration multiplier"] {
  grid-area: penMulti;
}
.gridTest .SB-Infobox-Cell-Grid[data-alt="Corrosion resistance"] {
  grid-area: corRes;
}
.gridTest .SB-Infobox-Cell-Grid[data-alt="Plasticity"] {
  grid-area: plasticity;
}
.gridTest .SB-Infobox-Cell-Grid[data-alt="Density"] {
  grid-area: density;
  grid-row-end: density-end;
}

.gridTest .SB-Infobox-Cell-Header {
  position: absolute;
  margin: 0;
  z-index: 2;
  background: rgb(42, 88, 81);
  top: -120%;
  left: 70%;
  padding: 0.125em 0.75em;
  border-radius: 0.25em;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  width:max-content;
}
.gridTest .SB-Infobox-Cell-Grid:hover .SB-Infobox-Cell-Header {
  opacity: 1;
  pointer-events: all;
}

.gridTest .SB-Infobox-Data-Cell {
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
  position: relative;
}

.gridTest .SB-Infobox-Data-Cell:hover {
  background: none;
}

.gridTest:hover {
  background-color:#3a80802b;
}
}}