将网格自动布局与固定行列位置混合
P粉492959599
P粉492959599 2023-09-15 16:01:55
[CSS3讨论组]

我有以下带有 CSS 网格的 HTML

<div id="grid">
    <div class="main-item">Main</div>
</div>
#grid {
    display: grid;
    grid-template-columns: repeat(5, auto);
    text-align: center;
}

#grid > * {
    border: 1px solid blue;
    padding: 20px;
}

#grid > .main-item {
    grid-row: 3;
    grid-column: 3 / 5;
    background: rgba(0, 0, 0, 0.2);
}

重要的部分是 .main-item 在网格中具有固定的位置

我现在向网格添加 25 个单元格

const grid = document.querySelector("#grid");

for (let i = 0; i < 25; i++) {
    const item = document.createElement("div");
    item.innerText = i.toString();
    grid.append(item);
}

问题是我希望这些元素忽略 .main-item 的位置(将其视为不存在)。不过,CSS 目前已对此进行了纠正,并使元素围绕 .main-item 流动。我想要以下次要行为:

我可以通过在 JavaScript 中设置 style.gridRowstyle.gridColumn 来纠正

item.style.gridRow = (Math.floor(i / 5) + 1).toString();
item.style.gridColumn = ((i % 5) + 1).toString();

有没有一种方法可以做到这一点而不用在 JS 中设置所有其他元素?有没有CSS防止固定元素影响流量修正?

代码笔链接

P粉492959599
P粉492959599

全部回复(1)
P粉440453689

您可以给网格一个相对位置,并绝对定位特定网格项。

const grid = document.querySelector("#grid");
for (let i = 0; i < 25; i++) {
    const item = document.createElement("div");
    item.innerText = i;
    grid.append(item);
}
#grid {
    display: grid;
    grid-template-columns: repeat(5, auto);
    text-align: center;
    position: relative;
}

#grid > * {
    border: 1px solid blue;
    padding: 20px;
}

#grid > .main-item {
    position: absolute;
    left: 0;
    right: 0;
    grid-row: 3;
    grid-column: 3 / 5;
    background: rgba(0, 0, 0, 0.2);
}
<div id="grid">
    <div class="main-item">Main</div>
</div>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号