如何将 CSS 网格内的弹性项目与其网格线对齐？

Posted 2023-03-07

【中文标题】如何将 CSS 网格内的弹性项目与其网格线对齐？

【英文标题】：How do you align flex items inside a css grid to its grid lines?

【发布时间】：2021-06-23 09:43:35

【问题描述】：

所以我使用 CSS Grid 做了一个布局，并且网格内的一些元素使用了 flexbox，比如文章框和其他一维部分。如何使用有效的响应式布局将此 flex 项与主网格布局对齐？

对于 12 列网格布局，我尝试在 flexbox 中使用百分比（tailwind 的 w-1/* 实用程序），但无法将它们与网格区域完美对齐。甚至可能吗？还是我应该一直使用网格？

这是我的布局示例，第一列只是显示 12 个网格区域，第二列是使用上述 12 列网格的布局，第三列包含我想要对齐的 flexbox 容器（它的盒子' 边缘）到主网格。

Tailwindcss 解决方案是首选但不是必需的。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto">
  
  <div class="grid gap-4 grid-cols-12 h-40 my-5">
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
     <div class="bg-blue-300"></div>
    
      <div class="col-start-2 col-span-5 bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      
      <div class="col-start-2 col-span-10 relative w-full flex flex-row h-5">
        <div class="bg-red-500 w-1/3 mr-4"></div>
        <div class="bg-yellow-300 w-1/3 mr-4"></div>
        <div class="bg-red-500 w-1/3"></div>
      </div>
  </div>

  
</div>

【参考方案1】：

您的div 有w-full 类。 w-full 是 width: 100%。

那么你已经嵌套了三个嵌套的div's：

<div class="col-start-2 col-span-10 relative w-full flex flex-row h-5">
    <div class="bg-red-500 w-1/3 mr-4"></div>
    <div class="bg-yellow-300 w-1/3 mr-4"></div>
    <div class="bg-red-500 w-1/3"></div>
</div>

所以上面的 div 放在<div class="col-start-2 col-span-10 relative w-full flex flex-row h-5"> 中并且它们完全对齐 根据他们的父母。

因此，如果您想对齐这些 div，则需要将 then 放入 grid，而不是 div：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto">
  
  <div class="grid gap-4 grid-cols-12 h-40 my-5">
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
     <div class="bg-blue-300"></div>
    
      <div class="col-start-2 col-span-5 bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      
      <div class="col-start-2 col-span-4 bg-red-500">1</div>
      <div class="col-span-2 bg-yellow-300">2</div>
      <div class="col-span-2 bg-red-500">3</div>
  </div>

  
</div>

可以看出，所有嵌套的div's都完美的放在了div里面：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto">
  
  <div class="grid gap-4 grid-cols-12 h-40 my-5">
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
     <div class="bg-blue-300"></div>
    
      <div class="col-start-2 col-span-5 bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      
      <div class="col-start-2 col-span-10 relative w-full flex flex-row h-5" style="overflow-y: auto; flex-direction: column;">
    <div class="bg-red-500 w-full mr-4">Flex 1</div>
    <div class="bg-yellow-300 w-full mr-4">Flex 2</div>
    <div class="bg-red-500 w-full">Flex 3</div>
  </div>
  </div>

  
</div>

更新：

如果你想让display: flex 用于嵌套项目，那么我们可以在外部容器中声明这个类并将嵌套元素放入其中：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto">
  
  <div class="grid gap-4 grid-cols-12 h-40 my-5">
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
     <div class="bg-blue-300"></div>
    
      <div class="col-start-2 col-span-5 bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      
      <div class="col-start-2 col-span-4 bg-red-500  
          w-full flex flex-row h-5">
    <div class="w-1/3">1</div>
    <div class="w-1/3">2</div>
    <div class="w-1/3">3</div>
  </div>
  <div class="col-span-2 bg-yellow-300 w-full flex flex-row h-5">
    <div class="w-1/3">1</div>
    <div class="w-1/3">2</div>
    <div class="w-1/3">3</div>
  </div>
  <div class="col-span-2 bg-red-500 w-full flex flex-row h-5">
    <div class="w-1/3">1</div>
    <div class="w-1/3">2</div>
    <div class="w-1/3">3</div>
  </div>
  </div>

  
</div>

更新 1：

如果你想要响应式网格，你可以使用媒体查询来获得它。让我举个例子：

.main-container 
  display: grid;
  grid-template-columns: 140px 180px 140px;
  grid-auto-rows: 30px;
  grid-column-gap: 7px;


.upper-main-container 
  display: grid;
  grid-template-columns: 140px 180px 140px;
  grid-auto-rows: 30px;
  grid-column-gap: 7px;


.one 
  background-color: aquamarine;


.two 
  background-color: lightgoldenrodyellow;


.three 
  background-color: lightgreen;


@media ( max-width: 400px ) 
  .main-container 
    grid-template-columns: 140px 180px;
    grid-column-gap: 1px;
  

   .upper-main-container 
    grid-template-columns: 107px 107px 107px;
    grid-auto-rows: 30px;
    grid-column-gap: 1px;
  

 <div class="upper-main-container">
   <div class="one">1</div>
   <div class="two">2</div>
   <div class="three">3</div>
 </div>
 <div class="main-container">
   <div class="one">1</div>
   <div class="two">2</div>
   <div class="three">3</div>
 </div>

【讨论】：

谢谢你，你的第一个代码sn-p是我想要的布局，但是第三列没有使用flex box。在您的第二个中，它有弹性框，但项目是全宽的，所以我看不到它的列的对齐方式。简而言之，我想要您的第一个代码 sn-p 的布局，但在第三行使用弹性框项目。是不是不可能，所以我必须始终使用网格来正确对齐列？

@Jjj 你可以像第二个例子一样使用flex。然而，所有嵌套元素 Flex 1、Flex 2 和 Flex 3 将被放置在这个 div 中 - <div class="col-start-2 col-span-10 relative w-full flex flex-row h-5" style="overflow-y: auto; flex-direction: column;">。因此，这些嵌套元素根据flex 而不是grid 对齐，这是正确的行为，因为这三个 div 嵌套在具有display: flex 的div 容器中

@Jjj 看来我明白你的意思了。请看我更新的答案。现在所有嵌套项都根据外部容器对齐

谢谢，但是弹性项目现在被一个网格项目包围了。在您的示例中，我希望红色和黄色框本身是 flexbox 项（而不是 flexbox 容器）。所以只有 3 个弹性项目 - 红色、黄色、红色。而且里面没有弹性项目。可能不可能，但我只想在第三行使用弹性框，因为我希望它在屏幕变小时时响应并换行。因此，例如，如果屏幕较小，则第二个红色框进入新行。

@Jjj 看起来你想要响应式网格。如果是，那么您可以使用 CSS 普通 @media 查询来获得所需的网格。请看我更新的答案

【参考方案2】：

根据您的插图，您似乎使用的是行而不是列。列是垂直的，行是水平的。 此外，对于 flex box，还有一个可能会有所帮助的增长属性。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 您也可以尝试在整个内容周围添加一个 div，将其显示设置为 flex，然后您可以使用 flex-end 属性将您正在使用的行拉伸到最后。

【讨论】：

Anwser 必须是一个明确的解决方案。您的 anwser 适合作为评论，但不适合作为 anwser。为了适合 anwser，它应该包含 mroe 然后只是一个链接和一些模糊的猜测。最好是一个 anwser 应该包含一个工作代码 sn-p 表明您的解决方案可以工作。 flex-end 也不会使弹性项目延伸到最后。它开始将它们放在最后（反向​​放置）。要使弹性项目增长到最后，您需要 flex-grow 代替。