.x2x2-norm {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b"
  "c d";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: c;
 }
 > :nth-child(4) {
  grid-area: d;
 }
}

.x2x2-onedot {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  ". b"
  "c d";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: b;
 }
 > :nth-child(2) {
  grid-area: c;
 }
 > :nth-child(3) {
  grid-area: d;
 }
}

.x2x2-2dot {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  ". b"
  "c .";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: b;
 }
 > :nth-child(2) {
  grid-area: c;
 }
}

.x2x2-1rowspan {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a a"
  "c d";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: c;
 }
 > :nth-child(3) {
  grid-area: d;
 }
}

.x2x2-1colspan {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b"
  "a d";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: d;
 }
}

.x2x2-2rowspan {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a a"
  "b b";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
}

.x2x2-2colspan {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b"
  "a b";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
}

.x2x2-1area {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a a"
  "a a";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
}

.x3x3-caseone {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b c"
  "a e f"
  "a h i";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: c;
 }
 > :nth-child(4) {
  grid-area: e;
 }
 > :nth-child(5) {
  grid-area: f;
 }
 > :nth-child(6) {
  grid-area: h;
 }
 > :nth-child(7) {
  grid-area: i;
 }
}

.x3x3-midcol {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b c"
  "d b e"
  "f b h";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: c;
 }
 > :nth-child(4) {
  grid-area: d;
 }
 > :nth-child(5) {
  grid-area: e;
 }
 > :nth-child(6) {
  grid-area: f;
 }
 > :nth-child(7) {
  grid-area: h;
 }
}

.x3x3-onebox {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a a b"
  "a a c"
  "d e f";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: c;
 }
 > :nth-child(4) {
  grid-area: d;
 }
 > :nth-child(5) {
  grid-area: e;
 }
 > :nth-child(6) {
  grid-area: f;
 }
}

.x3x3-1col1box {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 margin: 15px;
 gap: 1px;
 grid-template-areas:
  "a b b"
  "a b b"
  "a c d";
 > * {
  border: solid 2px silver;
 }
 > :nth-child(1) {
  grid-area: a;
 }
 > :nth-child(2) {
  grid-area: b;
 }
 > :nth-child(3) {
  grid-area: c;
 }
 > :nth-child(4) {
  grid-area: d;
 }
}

.xgrid-tpl-area-qJn4C {
 display: grid;
 grid-template-columns: 1fr 4fr;
 grid-template-rows: auto auto;
 margin: 15px;
 gap: 1px;

 grid-template-areas:
  "aa aa"
  "bb cc"
  "dd dd";

 > * {
  border: solid 2px silver;
 }
 > .main {
  grid-area: cc;
  height: 60px;
 }
 > .header {
  grid-area: aa;
 }
 > .sidebar {
  grid-area: bb;
 }
 > .footer {
  grid-area: dd;
 }
}