.xgrid-B2HXr {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-row: 1;
  grid-column: 2;
 }
}

.xgrid-MJP3V {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-row: 1 / 3;
  grid-column: 2;
 }
}

.xgrid-tW2CC {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-row: 1/3;
  grid-column: 2/4;
 }
}

.xspanrow-QkMtY {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-row: span 3;
 }
}

.xspanboth-QX4pf {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-row: span 2;
  grid-column: span 2;
 }
}

.spancol-FT5HJ {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-1 {
  border: solid 2px red;
  grid-column: span 2;
 }
}

.x2nd-FdtNt {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 15px;
 gap: 2px;
 > * {
  border: solid 1px grey;
 }
 > .xitem-2 {
  grid-column: span 3;
  border: solid 2px red;
 }
}