Grid columns too far apart - css

Question

I am currently designing a login page using ant design in React. I tried using the grid system to design the login page. However, I am stuck with this issue where my columns are too far apart from one another. I would like to close the gap between them. Below is the screenshot of my issue:
Below is my code
import React from 'react'; import { Row, Alert, Col, Form, Input, Button, Checkbox, Card } from 'antd'; import { UserOutlined, MailOutlined, LockOutlined } from '#ant-design/icons';
const Register = () => { const onSubmit = (values) => {};
return (
<>
<Row
justify='center'
align='middle'
style={{ height: '100vh', flexWrap: 'wrap' }}
>
<Row style={{ width: '100%' }} justify='center'>
<Col xs={18} md={8}>
<Alert type='error' message='User already exist' banner />
</Col>
</Row>
<Col xs={18} md={8} style={{ width: '100%' }}>
<Card className='login-card'>
<Form
name='normal_login'
className='login-form'
initialValues={{
remember: true,
}}
onFinish={onSubmit}
>
<h1 id='signin-header'>Register</h1>
<Form.Item
name='name'
rules={[
{
required: true,
message: 'Please input your name!',
},
]}
hasFeedback
>
<Input
prefix={<UserOutlined className='site-form-item-icon' />}
placeholder='Name'
/>
</Form.Item>
<Form.Item
name='email'
rules={[
{
required: true,
message: 'Please input your email!',
},
{
type: 'email',
message: 'Please input a valid email!',
},
]}
hasFeedback
>
<Input
prefix={<MailOutlined className='site-form-item-icon' />}
placeholder='Email'
/>
</Form.Item>
<Form.Item
name='password'
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
hasFeedback
>
<Input.Password
placeholder='Password'
prefix={<LockOutlined className='site-form-item-icon' />}
/>
</Form.Item>
<Form.Item>
<Form.Item name='remember' valuePropName='checked' noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit' block>
Register
</Button>
<div id='register-text'>
Arleady have an account? Login now!
</div>
</Form.Item>
</Form>
</Card>
</Col>
</Row>
</> ); };
export default Register;

Answer 1

Try to use alignItems: 'stretch' in your first row.
...
<Row
justify='center'
align='middle'
style={{ height: '100vh', flexWrap: 'wrap', alignItems: 'stretch' }}
>
<Row style={{ width: '100%', marginBottom: '10px' }} justify='center' align="bottom">
...
Working CodeSandBox