https://play.tailwindcss.com/
<nav class="flex h-16 items-center justify-between bg-white px-4 shadow-md"><a href="#" class="text-xl font-bold"> LOGO </a><div class="flex gap-6"><a href="#">首页</a><a href="#">商品</a><a href="#">购物车</a></div>
</nav><div class="flex h-32 justify-around bg-gray-100 p-4"><div class="h-16 w-16 bg-blue-500">A</div><div class="h-16 w-16 bg-red-500">B</div><div class="h-16 w-16 bg-yellow-500">C</div>
</div><div class="flex h-32 justify-start bg-gray-100 p-4"><div class="h-8 w-16 bg-blue-500">A</div><div class="h-16 w-16 bg-red-500">B</div><div class="h-24 w-16 bg-yellow-500">C</div>
</div><div class="grid h-32 grid-cols-3 gap-4 bg-yellow-100 p-4"><div class="col-span-2 bg-blue-500">A</div><div class="row-span-2 bg-red-500">B</div><div class="col-start-2 bg-yellow-500">C</div>
</div><div class="grid h-32 grid-cols-6 gap-4 bg-green-100 p-4"><div class="col-span-4 col-start-2 bg-blue-500">A</div><div class="col-span-2 col-start-1 bg-red-500">B</div><div class="col-span-2 col-end-7 bg-green-500">C</div><div class="col-start-1 col-end-7 bg-yellow-500">C</div>
</div><div class="grid h-32 grid-cols-[200px_1fr_300px] grid-rows-[auto_1fr] gap-2 bg-gray-300 p-1"><header class="col-span-3 bg-blue-300">heaser</header><aside class="row-span-2 bg-red-300">aside</aside><main class="col-span-2 bg-green-300"></main>
</div><div class="grid md:grid-cols-2 gap-4"><div class="flex flex-col p-4 bg-gray-100 rounded-lg shadow"><div class="flex-1">内容区域，自动填充</div><div class="flex-none mt-2">底部按钮</div></div>
</div><br></br>
<div style="display:flex; width:300px; height:50px; gap:2px;" ><div style="flex:1; background:red;"></div><div style="flex:1; background:green;"></div><div style="flex:1; background:blue;"></div>
</div>
<br/>
<div style="display:flex; width:300px; height:50px; gap:2px;"><div style="flex:2; background:red;"></div><div style="flex:1; background:green;"></div><div style="flex:1; background:blue;"></div>
</div>
<br/>
<div style="display:flex; width:300px; height:50px; gap:2px;"><div style="flex:0; background:red;">我是文字</div><div style="flex:1; background:green;"></div><div style="flex:1; background:blue;"></div>
</div>
<br/>
<div style="display:flex; width:300px; height:50px; gap:2px;"><div style="flex:none; background:red; width:80px;">固定</div><div style="flex:1; background:green;"></div><div style="flex:1; background:blue;"></div>
</div><br/><br/><br/>