如何在 CSS 网格中混合行以删除行之间的空白？

Question

这是一个带有多个断点和顺序更改的 CSS 网格。我正在尝试填充屏幕截图中的空白区域（红色箭头空间）。我通常使用flex，第一次尝试grid，但我迷路了。在react中使用tailwindcss。

要知道的事情 - Office Notes、Experience 将动态加载，因此它们的高度可以改变。

 <div className='grid grid-cols-1 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 gap-x-6 gap-y-6 grid-flow-dense'>
   
            <div className='order-1'>

                <Account />

            </div>

            <div className='grid gap-y-6 lg:grid-cols-1 lg:col-span-2 lg:row-span-3 lg:content-start order-2'>

                    <OfficeNotes />

                    <Experience />

                    <UserLocation />

            </div>

            <div className='order-3 2xl:order-4'>

                <GigCount />

            </div>

            <div className='order-4 3xl:order-5'>

                <Pay />

            </div>


            <div className='order-5 2xl:order-3 '>

                <RatingPanel />

            </div>

            <div className="order-6 3xl:order-4">

                <Social />

            </div>

            <div className="order-7">

                <Emergency />

            </div>

        </div>

蒂亚

Answer 1

使用

grid-auto-flow: row dense;

以便告诉浏览器将单元格尽可能紧密地打包。在 Tailwind 中，您可以使用以下实用程序类：

grid-flow-row-dense

Answer 2

以下是需要考虑的策略：

1.调整

grid-template-rows

:

• 定义明确的行高以更好地控制布局。
• 考虑使用 minmax() 来实现适应内容的灵活高度：

CSS：

.grid {
   grid-template-rows: minmax(40px, auto) 
   minmax(100px, auto)        
   minmax(80px, auto); /* Adjust values as needed */
}

2。按顺序重新排列元素：

使用顺序在网格内重新定位元素，尤其是在断点处：

.GigCount {
   order: 3;
   lg:order-4; /* Example for larger screens */
}

3.考虑网格自动流：密集： 此属性鼓励网格项填充空白空间，但对于动态大小的元素来说可能并不理想。 谨慎使用并测试意外行为。

4。采用嵌套网格： 在 OfficeNotes/Experience/UserLocation 容器中创建嵌套网格以进行更精细的控制：

.nested-grid {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Adjust as needed */
}

5。利用最小高度： 为内容可能较短的元素设置最小高度，确保它们占用最小空间：

.OfficeNotes {
  min-height: 100px; /* Example */
}