Another Dungeon Grid.css
From Another Eden Wiki
.adgrid-container {
display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; align-content: flex-start;
}
.adgrid {
margin: 1em .5em; border: 1px solid #333; padding: .5em; display: grid; grid-template-areas: "adimage adimage adimage" "adname adname adname" "eratext weaknesstext resiststext" "eraicon weaknessicon resistsicon" "eraicon absorbstext thirdrewardtext" "eraicon absorbsicon thirdrewardicon" "tomes tomes tomes"; grid-column-gap: .2em; grid-row-gap: .2em;
}
.adgrid .adimage {
grid-area: adimage; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center;
}
.adgrid .eratext {
grid-area: eratext; display: flex; justify-content: center;
}
.adgrid .weaknesstext {
grid-area: weaknesstext; display: flex; justify-content: center;
}
.adgrid .resiststext {
grid-area: resiststext; display: flex; justify-content: center;
}
.adgrid .eraicon {
grid-area: eraicon; display: flex; justify-content: center;
}
.adgrid .weaknessicon {
grid-area: weaknessicon; display: flex; justify-content: center;
}
.adgrid .resistsicon {
grid-area: resistsicon; display: flex; justify-content: center;
}
.adgrid .absorbstext {
grid-area: absorbstext; display: flex; justify-content: center;
}
.adgrid .thirdrewardtext {
grid-area: thirdrewardtext; display: flex; justify-content: center;
}
.adgrid .absorbsicon {
grid-area: absorbsicon; display: flex; justify-content: center;
}
.adgrid .thirdrewardicon {
grid-area: thirdrewardicon; display: flex; justify-content: center;
}
.adgrid .tomes {
grid-area: tomes; display: flex; flex-direction: column; justify-content: center;
}
.adgrid .tomes .mw-collapsible {
margin-top: -1.5em;
}
.adgrid .tomes span {
align-self: center;
}