Как использовать сетку antd grid для объединения нескольких столбцов?

Для объединения нескольких столбцов в сетке antd grid вы можете использовать свойство `span` и указать количество столбцов, которые должны быть объединены. Например, для объединения столбцов 1-3 вместе, вы можете использовать `span={3}`.

Чтобы ширина синего блока зависела только от блоков column 1-3, вы можете сделать column 4 `display: none` и добавить синему блоку класс, который будет иметь `justify-self: stretch`. Это позволит синему блоку занимать все доступное место внутри родительского контейнера.

Вот пример кода с использованием antd grid:

```
import React from "react";
import ReactDOM from "react-dom";
import { Grid } from "antd";
import "./styles.css";

const { Row, Col } = Grid;

const App = () => (
  <div>
    <Row gutter={[16, 16]}>
      <Col span={6} style={{ background: "red", height: "100px" }}>
        column 1
      </Col>
      <Col span={6} style={{ background: "green", height: "200px" }}>
        column 2
      </Col>
      <Col span={6} style={{ background: "blue", height: "300px" }}>
        column 3
      </Col>
      <Col span={6} style={{ display: "none" }}>
        column 4
      </Col>
      <div className="blue-block" />
    </Row>
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));
```

И вот пример стилей:

```css
.blue-block {
  background: blue;
  justify-self: stretch;
  grid-column: 1 / span 3;
  grid-row: 1;
}
```

В результате синий блок будет растягиваться в зависимости от ширины блока column 1-3, игнорируя высоту блока column 4.

Если вам не подходит сетка antd grid для данной задачи, можно использовать другую разметку или фреймворк (например, flexbox или CSS-таблицы) для достижения нужного результата.