使用Bulma.css在React.js中每隔3个列元素添加新的列容器

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

import React from 'react';
import 'bulma/css/bulma.min.css';

const MyComponent = () => {
  return (
    <div className="columns">
      {/* 列元素 */}
      <div className="column">列元素1</div>
      <div className="column">列元素2</div>
      <div className="column">列元素3</div>
      {/* 新的列容器 */}
      <div className="column">新的列容器</div>
      {/* 列元素 */}
      <div className="column">列元素4</div>
      <div className="column">列元素5</div>
      <div className="column">列元素6</div>
      {/* 新的列容器 */}
      <div className="column">新的列容器</div>
      {/* 列元素 */}
      <div className="column">列元素7</div>
      <div className="column">列元素8</div>
      <div className="column">列元素9</div>
      {/* 新的列容器 */}
      <div className="column">新的列容器</div>
    </div>
  );
};