Using Tailwind CSS in React, I want to:

1. Have a two-column page. Column 1, which holds the "Menu" component, should take up 20% of the screen. Column 2, which holds the "Templates" component, should take up 80% of the screen.
2. Column 2, the "Templates" component, renders 4 dropdowns of varying width. I want each of the dropdowns to render in a column, but I want each column to be only as wide as it needs to be to display the dropdown. I don't want the columns to have equal width. My problem is that the columns are of equal width. How can I get each column width to only be as wide as the dropdown that gets rendered inside it?

In other words, I want the page to look like this:

    [menu button]   [Carrier Groups] [States] [Policy Types] [Statuses]

...instead of like this:

    [menu button]   [Carrier Groups]        [States]        [Policy Types]       [Statuses]

To render the 2-column page I'm doing this in my App component. This works fine. In the parent div I have "grid-cols-5", and in the 2nd child div I have "col-span-4" to consume 80% of the page.

function Content(){
  return (
    <div className="w-screen h-screen grid grid-cols-5 gap-3">
      <div>
        <Menu />
      </div>
      <div className="col-span-4">
        <Templates/>
        </div>
    </div>
  );
}

function App() {
  const queryClient = new QueryClient()
  return (
    <QueryClientProvider client={queryClient}>
    <Content />
    <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

export default App;

This is the Templates component that renders in the 2nd child div. I am rendering 4 components in 4 columns. As mentioned each component renders a dropdown. The 4 columns are of equal width. Is there anything I can change so that the 4 columns are only as wide as needed to render each dropdown?

const Templates = () => {
    return (
        <form>
            <h1 className="prose-2xl m-0">Templates</h1>
            <div className='w-screen grid grid-cols-4 gap-3'>
                <div>
                    <h2>Carrier Group</h2>
                    <CarrierGroups />
                </div>
                <div>
                     <h2>State</h2>
                     <States />
                </div>
                <div>
                    <h2>Policy Type</h2>
                    <PolicyTypes />
                </div>
                <div>
                    <h2>Status</h2>
                    <Statuses/>
                </div>
            </div>
        </form>
    );
}

export default Templates;

CodePudding user response：

1. To create a two-column 20% / 80% layout I would do how you suggest. When using grid-cols-{n} you are creating an explicit grid and the columns will be equal widths.

2. When you need columns of varying widths you can create an implicit grid, the key class here being auto-cols-min. You also need to include a col-start-{n} class for each column that you want.

<div >
  <div >col 1</div>
  <div >col 2</div>
  <div >col 3</div>
  <div >col 4</div>
</div>

Demo of above: https://play.tailwindcss.com/gKRtn7vFgi?layout=horizontal

More info:

https://tailwindcss.com/docs/grid-auto-columns

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns