当长文本后没有更多的文本时,可以通过以下方法在网格中消除多余的空间:
grid-template-rows
属性设置网格行的高度为auto
,这样网格行的高度将根据内容自动调整,没有内容的行将自动收缩,从而消除多余的空间。.grid-container {
display: grid;
grid-template-rows: auto;
}
grid-auto-rows
属性设置网格自动行的高度为min-content
,这样网格自动行的高度将根据内容的最小高度自动调整,没有内容的行将自动收缩,从而消除多余的空间。.grid-container {
display: grid;
grid-auto-rows: min-content;
}
const gridContainer = document.querySelector('.grid-container');
const gridItems = document.querySelectorAll('.grid-item');
function adjustGridRows() {
const lastGridItem = gridItems[gridItems.length - 1];
const lastGridItemRect = lastGridItem.getBoundingClientRect();
const gridContainerRect = gridContainer.getBoundingClientRect();
if (lastGridItemRect.bottom <= gridContainerRect.bottom) {
const emptyRowsCount = Math.floor((gridContainerRect.bottom - lastGridItemRect.bottom) / lastGridItemRect.height);
for (let i = 0; i < emptyRowsCount; i++) {
gridContainer.removeChild(gridItems[gridItems.length - 1]);
}
}
}
window.addEventListener('resize', adjustGridRows);
以上方法可以根据具体情况选择使用,以消除网格中多余的空间。
领取专属 10元无门槛券
手把手带您无忧上云