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

问题描述 投票:0回答:2

这是一个带有多个断点和顺序更改的 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>

蒂亚

css reactjs next.js tailwind-css css-grid
2个回答
0
投票

使用

grid-auto-flow: row dense;
以便告诉浏览器将单元格尽可能紧密地打包。在 Tailwind 中,您可以使用以下实用程序类:
grid-flow-row-dense


-1
投票

以下是需要考虑的策略:

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 */
}
© www.soinside.com 2019 - 2024. All rights reserved.