Card Panel

The Card panel expects 3 inner blocks for the header, body, and footer. To put multiple blocks in the body, use a group or CSS grid block.

To enable the Card panel, go to Design > Design Settings (3 dots).

The Card panel sets “grid-template-rows: auto 1fr auto;”:

.wp-block-b2wp-grid.grid-example {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Custom CSS sets the height:

.wp-grid-name {
  height: 400px; // or other value
} 

Card with 2 body paragraphs

.wp-block-b2wp-grid.grid-card-example {
  display: grid;
  grid-template-rows: 1 fr 1;
  row-gap: 1rem;
  column-gap: 1rem;
}
.wp-block-b2wp-grid.grid-card-example {
  height: 400px;
}

Card with CSS grid block body

Card with full screen height

See the example Card with Full Screen Height, which shows the setting “Set to full screen height”:

.wp-block-b2wp-grid.grid-card-example-full-height {
  display: grid;
  grid-template-rows: 1 fr 1;
  row-gap: 1rem;
  column-gap: 1rem;
}
.wp-block-b2wp-grid.grid-card-example-full-height {
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}