CODEWITHSUNDEEP
cssreactjs
Ben Zoker
Ben Zoker

Reputation: 157

Aligning few components horizontally in React

I have three big component. Two of thes takes something like 1/3 of the screen and my goal is to present them at the horizontally from left to right.

When just putting them like in the code I added, they presented one after another Vertically which causing the uder to scroll down to find them. How can I present them in horizontally on the screen ? (I tried a couple of things with css with no success).

This is the return method, the Tables component contains two different tables inside of it:

 return (
      <div>
        {title} <Chat />
        <Tables/>}

      </div>
    );

Upvotes: 11

Views: 36690

Answers (2)

Jolly
Jolly

Reputation: 1768

First, I should suggest you to improve your question: you said you have three big Components, but in the render() method I see two divs and the title. Is the title on of those 3 big components?
Or, should the title being just above the Chat Component, which is then positioned side by side with the Table Component?

Anyways, I supposed the title it's right above the Chat Component, and together they are side by side with Table Component: take a look at this fiddle:

window.styled = window.styled.default;

const AppContainer = styled.div`
    width: 500px;
    height: 300px;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 25% 75%;
`;

const Title = styled.div`
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    background: #BD5027;
    color: #F0F0F0;
    padding: 5px;
`;

const Chat = styled.div`
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    background: #276DBD;
`;

const Table = styled.div`
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    background: #2FC849;
`;

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        const {title} = this.props;
        
        return (
            <AppContainer>
                <Title>{title}</Title>
                <Chat />
                <Table />
            </AppContainer>
        );
    }
}

ReactDOM.render(<App title="Hello World!" />, document.getElementById('root'));
@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.4.10/styled-components.min.js"></script>

<div id='root'></div>

Now, the explanations: I've use the pretty new CSS rules based on the grid system. These rules are really good to create the skeleton of your application, allowing you to create a grid system in which you can render different item. Further explanation can be found, for example, here → https://css-tricks.com/snippets/css/complete-guide-grid/

If my supposition was wrong, and my result is not what you wanted, let me know exactly what you want to achieve, and I'll try to help!

EDIT: For the sake of simplicity, in this example I've used styled-component instead of creating Components, but I think you got what's the "How-to" with the grid rules.

Upvotes: 2

Nasta
Nasta

Reputation: 929

You should take a look at flexboxes !

As you probably know, React lets you create component, so you can style them just like html elements with flexboxes.

Definitely give this article a read!

Edit: EXAMPLE

HTML:

<div class="flexbox-container">
    <div>Element1</div>
    <div>Element2</div>
    <div>Element3</div>
</div>

CSS:

.flexbox-container {
    display: flex;
    flex-direction: row;
}

This will align your elements horizontally with even spacing! Try playing with the container's margins and justify-elements to align elements.

Upvotes: 17

Related Questions