Tailwind布局问题：实现左列容器级限宽、右列通屏效果

要实现左侧列对齐container左侧限宽、右侧列延伸至屏幕右边缘的效果，你可以调整布局结构，利用Tailwind的grid和容器特性来实现，具体代码如下：

<section class="mb-[150px]">
  <!-- 外层grid：左侧列匹配container最大宽度，右侧列占满剩余空间 -->
  <div class="grid md:grid-cols-[minmax(0,1220px)_1fr] gap-[25px] lg:gap-[65px]">
    <!-- 左侧列：用container保证和其他section的布局对齐 -->
    <div class="xl:container mx-auto px-[15px]">
      <div class="flex flex-col justify-center md:text-left py-[24px] text-center pt-[115px]">
        <h2>col 1</h2>
      </div>
    </div>
    <!-- 右侧列：自动占满屏幕剩余宽度，延伸到右边缘 -->
    <div class="hidden md:block overflow-hidden">
      <div class="h-full">
        <!-- 这里放置你的slider或其他内容 -->
        <h2>col 2</h2>
      </div>
    </div>
  </div>
</section>

关键说明： #

• 外层grid的md:grid-cols-[minmax(0,1220px)_1fr]定义了两列：第一列最大宽度和你的container一致（1220px），第二列占满剩余所有空间，直接延伸到屏幕右边缘。
• 左侧列内部嵌套xl:container mx-auto px-[15px]，确保内容和其他section的container布局完全对齐，不会超出限宽范围。
• 右侧列通过overflow-hidden处理内容溢出，避免横向滚动。

如果需要适配更大的屏幕，你可以把1220px替换成Tailwind对应的容器变量（比如theme('container.maxWidth.xl')，如果在配置中定义过的话），不过直接写固定值也能满足需求。

内容的提问来源于stack exchange，提问作者Natmesh