How to display only to items in row?

Question

I Don't know how to display only two elements in row and keep last Column empty, spend almost 9h to find resolve Red zone has to be empty, here is react component of the card

return (

    <Row gutter={[24,24]}>
        {
            name.map((news)=>(
                <Col xs={24} sm={12} lg={8} key={news.id}>
                    {/*<div className={"card"}>*/}
                    <Card hoverable className={"news-card"} style={{height: "250px"}}>
                        <a href={news.url} target={"_blank"} rel={"noreferrer"}>
                            <div className="news-image-container">
                                <Title className={"news-title"} level={4}>{news.name}</Title>
                                <img style={{maxWidth: '200px', maxHeight: '100px'}} src={news.image} alt={"news"}/>
                            </div>
                            <p>
                                {
                                    news.description.length > 100 ? `${news.description.substring(0, 100)}...`
                                        :news.description
                                }
                            </p>
                            <div className="provider-container">
                                <Text>{moment(news.datePublished).startOf('ss').fromNow()}</Text>
                            </div>
                        </a>
                    {/*</div>*/}
                    </Card>
                </Col>
            ))
        }
    </Row>
);