.xgd-item {
 border: solid 1px grey;
 padding: 0.3rem;
 border-radius: 0.5rem;
 margin: 1px;
}

.xgrid-main-RrpYB {
 display: grid;
 grid-template-columns: 20% 80%;
 grid-template-rows: auto auto auto;

 gap: 1px;

 grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

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

.xgrid-v78sn {
 display: grid;
}

.xgrid-ZdKb2 {
 display: grid;
 grid-template-columns: 30px 90px 30px;
}

.xgrid-HStCQ {
 display: grid;
 grid-template-rows: 1fr 3fr 1fr;
}

.xgrid-q3r8g {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: 1fr 2fr 1fr;
}

.xgrid-kFNk4 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
}

/* s------------------------------ */

.xgridbox {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
 margin: 1.5rem;
 gap: 2px;
 > * {
  border: solid 1px grey;
  margin: 0;
  padding: 0.3rem;
  border-radius: 0.5rem;
 }
 > .xitem-1 {
  border: solid 2px red;
 }
}

.xgrid-B2HXr {
 > .xitem-1 {
  grid-row-start: 1;
  grid-column-start: 2;
 }
}

.xgrid-MJP3V {
 > .xitem-1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
 }
}

.xgrid-tW2CC {
 > .xitem-1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
 }
}

.xspan3row {
 > .xitem-1 {
  grid-row: span 3;
 }
}

.spancol-FT5HJ {
 > .xitem-1 {
  grid-column: span 2;
 }
}

.x2ndspancol {
 > .xitem-2 {
  grid-column: span 3;
 }
}

.spanbothQX4pf {
 > .xitem-1 {
  grid-row: span 2;
  grid-column: span 2;
 }
}