1

How to make such a Grid in antd ? I have not found how to set the height of the first element to 2 lines.

.container {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "div1 div2"
    "div1 div3";
}

.div1 { grid-area: div1;     background-color:red ;}

.div2 { grid-area: div2;     background-color:blue ;}

.div3 { grid-area: div3;     background-color:green ;}
<div class="container">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

I did it this way. But I'm not sure that this is the right way.with this method, I can't set equal margins as in css grid.

        <Row>
            <Col span={16} >
                <img src={require('../../../../assets/images/img1.jpg')} alt=''/>
            </Col>
            <Col span={8}>
                <Row>
                    <Col>
                        <img src={require('../../../../assets/images/img1.jpg')} alt=''/>
                    </Col>
                    <Col>
                        <img src={require('../../../../assets/images/img1.jpg')} alt=''/>
                    </Col>
                </Row>
            </Col>
        </Row>
qwerty
  • 205
  • 2
  • 10

0 Answers0