Javascript 如何使用css在3列中显示项目

我尝试在3中拼接1个数组以显示3列，但我只想使用一个数组

如何在3列中显示项目

这是我的密码：

// JSX
{(!loading && mapsFiltereds) && 
    <section className="features">
        <div className="container d-flex flex-row">
            { (mapsFiltereds.map( (map, index) => {
                return (
                    <div className="col-md-4 col-sm-4" key={index}>
                        <div className="features-content">
                            <h3>{map.name}</h3>
                            <input className="own-image" src={map.background.thumbnail} type="image" value={index} alt={'mapa'} />
                        </div>
                    </div>
                );
            }))}
        </div>
    </section>
}

// CSS
.features-content {
    width: auto;
    height: 250px;
    position: relative;
    text-align: center;
    border: 1px solid #f4f5f7;
    padding: 10px 5px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba( 107, 121, 124, 0.5);
}

.features-content h3 {
    font-weight: 400;
    color: #475052;
    font-size: 18px;
    text-transform: uppercase;
}

.own-image {
    position: absolute;
    width: 180px;
    height: 180px;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid transparent;
    cursor: pointer;
    -moz-box-shadow: 1px 1px 10px #e2e2e2;
    -webkit-box-shadow: 1px 1px 10px #e2e2e2;
    box-shadow: 1px 1px 10px #e2e2e2
}

我解决了这个问题

{(!loading && mapsFiltereds) && 
    <section className="features">
        <div className="flex-row-container">
            { (mapsFiltereds.map( (map, index) => {
                return (
                    <div className="flex-row-item" key={index}>
                        <h3>{map.name}</h3>
                        <input className="own-image" src={map.background.thumbnail} type="image" value={index} alt={'mapa'} />
                    </div>
                );
            }))}
        </div>
    </section>
}


.flex-row-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.flex-row-container > .flex-row-item {
    flex-grow: 1;
    flex: 1 1 30%;
    height: 250px;
}

.flex-row-item {
    max-width: 250px;
    margin: 10px 10px 10px 10px;
    position: relative;
    text-align: center;
    border: 1px solid #f4f5f7;
    padding: 10px 5px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba( 107, 121, 124, 0.5);
}

.flex-row-item h3 {
    font-weight: 400;
    color: #475052;
    font-size: 18px;
    text-transform: uppercase;
}

.flex-row-item input {
    position: absolute;
    width: 180px;
    height: 180px;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid transparent;
    cursor: pointer;
    -moz-box-shadow: 1px 1px 10px #e2e2e2;
    -webkit-box-shadow: 1px 1px 10px #e2e2e2;
    box-shadow: 1px 1px 10px #e2e2e2
}

尝试