Customize the width of the columns in tailwinds

Question

I have the Navbar centered with auto left and right margin Navbar, I wanted to create two columns for the page content where the left column get almost 75% of the total width and the right column get 25%. The full width of the page is the width of the Navbar.

Answer 1

You can use w-1/4 and w-3/4 on two div tags, or you can create on the fly a w-[25%] and w-[75%] class as well. Another simple solution is

<div class="grid grid-cols-4 w-screen">
    <div class="col-span-1">
        25% content here
    </div>
    <div class="col-span-3">
        75% content here
    </div>
</div>