Fixed width columns in Antd?

user_1804173 0
Viewed 1730

I have read Antd's layout design documents and the docs on Grid and Layout. What I don't understand is how to accomplish the following design in Antd:

  • I'd like my app to have a single centered column.

  • On a wide screen (landscape clients), the center column should be fairly narrow. In terms of grid, maybe 8 units.

    enter image description here

  • On a narrow screen (portrait clients), the center column should use a relatively large width. In terms of grid up to 24 units in case of very narrow/small screen sizes.

    enter image description here

Basically this sounds like I'm looking for the good old container with a max width. I could obviously come up with some custom CSS to style a custom <div>, but this makes me wonder:

  • Am I missing something, or is there really no way to achieve that with Antd's layout system natively?
  • If so, am I doing something wrong in terms of modern UI design philosophy?
responsive-design antd reactjs ui-design
1 Answers

We have done this. Not exactly via Ant Design, but used a lot of Ant Design inside this.

I am not sure what other solutions are, but this is how we did it. The container you talked about was the parent container of our website, with everything else rendered inside this.

We created a routing inside the main container (as bottom tabs, so was convenient for us) and set its max-width to 420px. Since everything was contained in the bottom tabs, our app was centered when on landscape clients, and looked to fill the width on portrait mode.

Code for clarity. (its a react app)

App Container CSS:

.App {
  text-align: center;
   height: 100vh !important;
}

Parent Container CSS:

.parentcontainer {
  height: calc(100vh - 50px);
  max-width: '100%';
  display: inline-block;
  width: 100vw;
}

Tab CSS:

position: 'fixed',
padding-bottom: '10px',
bottom: '0',
width: '100%',
max-width: '420px',

This worked for us, and the behavior is what you desire.

user_80585830
Related