<!--Top Navbar / Search-->
<div class="grid grid-rows-1 grid-cols-3 h-20">
<div class="col-span-1 h-full w-64 bg-purple-200">
Logo Area
</div>
<div class="col-span-1 h-full w-full bg-purple-100">
Search Area
</div>
<div class="col-span-1 h-full w-full bg-purple-100">
Profile Area
</div>
</div>
<!-- Sidebar / Content-->
<div class="grid grid-rows-1 inline-grid grid-cols-2 h-screen">
<div class="col-span-1 h-full w-64 bg-purple-200">
Sidebar Area
</div>
<div class="col-span-1 h-full w-full bg-purple-100">
Content Area
</div>
</div>
以上是我正在使用的代码，我可以在 vanilla CSS 中轻松实现。
我正在使用上述内容开始构建 admin-esk 设计的网格结构。
但是，我无法正常工作，在打印屏幕上可见：
列的宽度，特别是内容列未填充宽度。
高度似乎中断了，并为页面添加了溢出，添加了可滚动的额外内容。
我似乎无法将搜索区域放在徽标区域旁边。
这在原版 CSS 中容易得多，Tailwind 使这变得更难了。
答案 0 :(得分：1)
使用 Tailwind 会变得更容易。查看working demo on tailwind play。
如果您的期望与我编写的代码不同，请在下面的评论中告诉我。
<div class="flex min-h-screen max-h-screen">
<!-- Left Navigation -->
<div class="flex flex-col w-64">
<!-- Logo -->
<div class="h-20 flex justify-center items-center bg-purple-300">Logo Area</div>
<!-- Sidebar -->
<div class="flex flex-1 bg-red-200 overflow-y-auto">
Sidebar Area
<br />
<br />
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla at aperiam sunt, quae voluptates blanditiis sed natus nostrum facilis in, rerum ipsa molestiae maxime veniam, accusantium quo facere totam deserunt! Fugit, molestias? Veritatis aspernatur consectetur ipsum fugit molestias reiciendis voluptatem, atque quisquam molestiae error sunt voluptatibus eum, quae blanditiis doloribus? Adipisci, impedit? Eaque earum est officiis excepturi non necessitatibus perferendis. Dolor iusto perferendis incidunt nesciunt sit officiis, dolorum possimus et tempora itaque laudantium ipsa non porro ratione omnis ducimus, voluptatem quos. Voluptatum consectetur officiis magni veritatis, possimus nesciunt quidem cumque! Cumque quisquam maxime libero suscipit veritatis qui a culpa voluptate quos modi repellendus sed est commodi ea, nihil rem laboriosam unde. Voluptatibus corrupti est quia quaerat officiis, eos deleniti deserunt. Optio aperiam velit molestiae, quasi repellendus voluptate sequi? Omnis, repudiandae suscipit perferendis ullam dignissimos labore aut! Veniam fugit earum dignissimos quos quasi, nam obcaecati laboriosam ut placeat recusandae ullam. Hic.
</div>
</div>
<!-- Right Component -->
<div class="flex flex-1 flex-col">
<!-- Header -->
<div class="h-20 flex">
<div class="flex flex-1 justify-center items-center bg-indigo-200">Search Area</div>
<div class="flex flex-1 justify-center items-center bg-blue-200">Profile Area</div>
</div>
<!-- Content -->
<div class="flex flex-1 overflow-y-auto bg-green-200">
Content Area
<br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita repellat odit quas, ipsum sapiente recusandae, exercitationem illo dolorem nulla aut, porro ea. Optio, omnis eum? Beatae dolorem odit quae fugiat. Quod nobis tempore mollitia minima repellendus atque quisquam? Quae maiores neque deserunt ad enim impedit rerum, dolorum dolor nulla porro ea ducimus officia repellat assumenda dicta in reprehenderit amet hic? Officiis incidunt quis ipsum nesciunt eum eos aspernatur modi, temporibus ut nisi! Optio quaerat odit, suscipit, quisquam et laboriosam adipisci labore quidem reprehenderit eum earum temporibus odio, omnis mollitia cum. Facilis libero officiis deleniti aperiam veniam aliquam saepe consequuntur quae facere provident illum asperiores, delectus ad animi, possimus fugit aspernatur error perferendis! Quia rem laudantium nemo vero magnam, in iusto. Adipisci tempore pariatur accusantium autem soluta, repellendus eum sequi quae a. Soluta rerum vitae perspiciatis consequuntur quas? Accusantium saepe, alias aliquid voluptatibus repellendus harum expedita vel libero praesentium adipisci dignissimos? Iusto harum inventore soluta magnam esse amet? Obcaecati aliquam reprehenderit saepe ullam, doloribus natus nobis! Quaerat similique, quo voluptatibus deserunt recusandae ratione earum sequi dicta quas iste incidunt totam nam. Doloremque perspiciatis quam distinctio, vitae voluptatibus quos odit aliquam necessitatibus ipsa hic ea error in. Totam in aliquam quo voluptatem non magni earum doloribus nostrum unde! Nisi expedita temporibus ratione. Incidunt eum sint illum ullam asperiores beatae nihil eos? Dolore voluptate molestias dignissimos fuga dicta. Doloribus accusamus distinctio quia deleniti enim officia, culpa quidem, fugiat animi fuga ad iure perferendis! Ab provident sequi deserunt id eos maxime odit totam fugiat ratione. Magnam sint excepturi dicta nesciunt culpa ratione delectus voluptatem repudiandae. Veritatis minima ratione aliquid ipsum quibusdam hic dolorum nihil. Ipsum, repellendus sed mollitia deleniti voluptatum natus tenetur officiis ea non quas expedita, aperiam ducimus sequi eius voluptatibus laboriosam magnam nulla. Corrupti voluptate porro sapiente pariatur velit cum eaque beatae. Eos provident inventore nostrum libero dolores veniam dicta sunt ratione aspernatur expedita, minus iusto est atque ex. Fugit consectetur explicabo, maiores maxime possimus, perspiciatis sequi quaerat beatae obcaecati porro quibusdam? Reiciendis harum repellat nisi esse atque sit, aperiam, quas ipsa error quisquam adipisci excepturi quod earum ducimus. Illo unde similique modi qui! Fugiat ipsam magni quas praesentium non, repellat eaque? Doloribus officiis consectetur iste dolor hic distinctio ipsa aperiam nostrum provident recusandae earum minima delectus magnam, at quod, fugiat tenetur soluta quam excepturi eos est obcaecati, numquam inventore repellendus? Incidunt. Omnis, repellendus rem praesentium autem dolorum voluptas! Accusantium odio eum magnam quis, dolor ipsum suscipit mollitia blanditiis laboriosam in dicta dignissimos doloremque minus, facere deleniti harum enim ut nostrum placeat! Omnis laboriosam excepturi necessitatibus nihil eum! Dicta quam unde consequuntur eveniet provident quidem eaque recusandae cumque magnam iste. Dicta quisquam perspiciatis sint sapiente labore. Corrupti ipsa nostrum voluptatem asperiores tenetur? Corporis quasi necessitatibus iste! Laboriosam possimus tenetur dolorum unde maiores, vel et voluptas perspiciatis perferendis, ratione nam dignissimos, nesciunt amet incidunt voluptatem tempora maxime. Doloribus facere vitae commodi nam assumenda. Molestiae dolorem eos officiis nam dicta vero? Minus incidunt vero magni atque inventore eveniet sequi veniam? Deserunt exercitationem dolores quia provident mollitia dolor odio, nam cupiditate atque voluptas itaque rem! Fugiat, corporis totam porro modi eos magni expedita placeat maxime rerum. Blanditiis mollitia nemo, itaque laboriosam autem illo laborum facilis incidunt vel nulla distinctio nam molestias voluptas quaerat numquam soluta. Nam voluptatem expedita doloremque placeat, voluptate, accusantium consectetur voluptas nulla possimus, corporis at delectus tempore odio autem unde quas hic temporibus error quisquam exercitationem consequatur a saepe. Dolore, blanditiis laborum? Voluptate error, repellat neque porro quod fugiat aspernatur voluptas quidem voluptates dolores maiores, deleniti incidunt. Ullam mollitia esse beatae illo consequatur sed iusto provident, incidunt aliquam dolores a, nulla laudantium.
</div>
</div>
</div>