webResponsiveGrid template

I have a webResponsive grid and I want to show 2 labels and a webbrowser in each column

 {"data":[{"id":1,"type":"test","summary":"summary2","source":"https://www.toolfolks.com/docs/"},{"id":2,"type":"test","summary":"summary2 1","source":"https://www.toolfolks.com/docs/"}]}

ChatGpt gave me

procedure TForm1.WebButton1Click(Sender: TObject);
begin
  // Set the template before loading data
  WebResponsiveGrid1.Options.ItemTemplate :=
    '<div style="padding: 10px; width: 100%;">' +
    '  <div style="margin-bottom: 0.5rem;"><strong>Type:</strong> (%type%)</div>' +
    '  <div style="margin-bottom: 1rem;"><strong>Summary:</strong> (%summary%)</div>' +
    '  <iframe src="(%source%)" style="width: 100%; height: 300px; border: none;"></iframe>' +
    '</div>';

  // Make the HTTPS GET request
  WebRESTClient1.HttpsGet('https://myWebhook');
end;

But it does not show correctly

The columns are to0 small 10px

Is it WebResponsiveGrid.Options.ItemGap you are seeing?