Revision history [back]

There are several ways to arrange div components horizontally in React, depending on your specific needs and the layout framework you are using. Here are some tips that may help:

1. Use a container component: If you want to arrange several divs horizontally, you can create a container component that wraps them all in a flexbox container. For example:

import React from 'react';

const MyContainer = () => (
  <div style={{ display: 'flex', flexDirection: 'row' }}>
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
  </div>
);

export default MyContainer;

1. Use the CSS display property: Another way to arrange divs horizontally is to use the CSS display property. You can set it to "inline-block" or "inline-flex" depending on your needs. For example:

import React from 'react';

const MyHorizontalDivs = () => (
  <div>
    <div style={{ display: 'inline-block' }}>Div 1</div>
    <div style={{ display: 'inline-block' }}>Div 2</div>
    <div style={{ display: 'inline-block' }}>Div 3</div>
  </div>
);

export default MyHorizontalDivs;

1. Use a layout framework: If you are using a layout framework like Bootstrap or Material-UI, you can use their grid systems to arrange divs horizontally. For example, in Material-UI, you can use the Grid component:

import React from 'react';
import { Grid } from '@mui/material';

const MyHorizontalGrid = () => (
  <Grid container spacing={2}>
    <Grid item xs={4}>Div 1</Grid>
    <Grid item xs={4}>Div 2</Grid>
    <Grid item xs={4}>Div 3</Grid>
  </Grid>
);

export default MyHorizontalGrid;

1. Adjust the width of each div: If you want to arrange divs horizontally without using a container or a layout framework, you can adjust the width of each div using CSS. For example:

import React from 'react';

const MyHorizontalDivsWithWidth = () => (
  <div>
    <div style={{ width: '33%' }}>Div 1</div>
    <div style={{ width: '33%' }}>Div 2</div>
    <div style={{ width: '33%' }}>Div 3</div>
  </div>
);

export default MyHorizontalDivsWithWidth;

Overall, arranging divs horizontally in React is a common requirement, and there are many ways to achieve it. By using the right tool for your needs, you can create clean, flexible layouts that work well on all devices.