https://visualgridbuilder.com/

• Mutter-DIV als Grid definieren. Wenn man z. B. 1 Reihe mit 2/3 und 1/3 möchte, dann muss man ein Grid mit 3 Spalten machen
• in VisualGridBuilder das Layout bauen und das CSS generieren lassen:

  /* Grid CSS */ 
  .grid { display: grid; grid-template-columns: repeat(3, minmax(10px, 1fr)); 
  grid-template-rows: repeat(0, minmax(100px, 1fr)); gap: 10px; } 
  
  /* Items CSS */ 
  .grid-item{ background: #c8b6ff; } 
  .grid-item-1 { grid-area: 1 / 1 / 2 / 3; } 
  .grid-item-2 { grid-area: 1 / 3 / 2 / 4; }

• im Kind-DIV das jeweilige CSS eintragen:

  DIV1 unter Advanced > CustomCSS: grid-area: 1 / 1 / 2 / 3;
DIV2 unter Advanced > CustomCSS: grid-area: 1 / 3 / 2 / 4;


• für jeden Breakpoint ein neues Layout im VisualGridBuilder bauen und dementsprechend in die Kind-DIVs eintragen.
• Im Tablet-Mode, wenn man nur eine Spalte möchte, dann trägt man ein:
  grid-area: auto;

In einer Gallery muss man sich in der Webansicht die entsprechende Klasse des Bildes über den Inspector heraussuchen.