CODEWITHSUNDEEP
cssreactjsmaterial-ui
Vojtěch Dohnal
Vojtěch Dohnal

Reputation: 8102

How to stack elements (cards) horizontally in a row within a parent element (div)

I have a question very similar to this one.

I have forked the Material UI Card example from https://material-ui.com/demos/cards/. The link to the sandbox editor is here.

Basically I need to stack Material UI cards horizontally in one row within a parent div and when they do not fit they would create another row bellow the previous.

So when i write:

render(
    <div className="row">
      <Demo /> <Demo />
    </div>,
    rootElement
  );

I expect to get the two cards besides one another.

I have added following styles with display: "inline-block", but the cards still stack vertically:

const styles = {
  card: {
    minWidth: 275,
    display: "inline-block"
  }
};

Upvotes: 1

Views: 6299

Answers (2)

cdoshi
cdoshi

Reputation: 2832

Couple of changes needed

1) Firstly the parent div needs to be inline-block as well. This is to ensure div can be aligned side by side

2) set white-space to nowrap to ensure elements do not wrap to the next line. Just because divs are inline-block does not mean they would be aligned side by side. If the inline div exceeds the width, it will be wrapped to the next line. You need to stop it by setting white-space param

https://codesandbox.io/s/9y51rxjmxy

Upvotes: 3

davbuc
davbuc

Reputation: 537

How about adding:

const styles = {
  card: {
    minWidth: 275,
    float: "left",
    marginRight: 10 // or sth.
  }
};

The problem is, that the wraps its content in a div which by default is display: block; - thats why display: inline-block doesn't work here on the Demo component.

Upvotes: 0

Related Questions