Grid Layout Modul

#grid_layout .entry-content-wrapper {
  margin: 0;
  display: grid;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-columns: 80px 2fr 1fr 1fr;   /*** also 4 Spalten ***/
  grid-template-rows: 1fr 1fr 1fr;            /*** also 3 Zeilen ***/
  grid-template-areas:
    "feld1 feld2 feld3 feld4"
    "feld1 feld5 feld6 feld7"
    "feld1 feld8 feld9 feld10";
}

/*** ich blende die mal aus - könnten stören ***/
#grid_layout .entry-content-wrapper:before,
#grid_layout .entry-content-wrapper:after {
  display: none;
}

/*** Aufhebung der Enfold bestehenden Regeln ***/
#grid_layout .entry-content-wrapper .flex_column {
  margin: unset !important;
  width: unset !important;
  padding: 20px;
}

#grid_layout .entry-content-wrapper .flex_column:nth-of-type(1) .av-special-heading {
  width: 100%;
 -ms-writing-mode:tb-rl;
 writing-mode:vertical-rl;
 transform:rotate(180deg);
}

/*** die Umsetzung/Benennung der Grid Areas ***/
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(1) { grid-area: feld1; display: grid; justify-content: center }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(2) { grid-area: feld2; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(3) { grid-area: feld3; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(4) { grid-area: feld4; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(5) { grid-area: feld5; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(6) { grid-area: feld6; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(7) { grid-area: feld7; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(8) { grid-area: feld8; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(9) { grid-area: feld9; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(10) { grid-area: feld10; }


/*** responsive Veränderung des Grid Layouts ***/
@media only screen and (max-width: 767px) { 
  #grid_layout .entry-content-wrapper {
    grid-template-columns: 80px 1fr 1fr;           /*** also 3 Spalten ***/
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;    /*** also 6 Zeilen ***/
    gap: 10px 10px;
    grid-template-areas:
      "feld1 feld2 feld2"
      "feld1 feld3 feld4"
      "feld1 feld5 feld5"
      "feld1 feld6 feld7"
      "feld1 feld8 feld8"
      "feld1 feld9 feld10";
  }
}