Css 混合网格自动布局与固定的行列位置

<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);
}

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

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

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

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>

Css相关问答推荐

如何在没有额外间隔的情况下使用Angularmaterial 图标？

如果父元素跨越所有网格列，子元素是否可以与网格一起工作？

我控制的自定义单选按钮无法重新 Select

以百分比形式输入的css宽度属性不会生效

当滚动量较小时，在滚动问题上动画粘性导航

如何使用来自单独模块的代码将自定义标头插入到使用 DT Shiny 呈现的表中？

如何在启动时滚动 div 的底部？

使用 React-Router 和 Outlet 时如何确保内容保持在下方

nth-child 在一个页面上工作，但不在另一个页面上

当我在几个月之间更改时，有什么方法可以在react-dates-range上添加淡入淡出或幻灯片效果？

宽度为 x VW 的元素似乎对窗口调整大小没有react

将复选框对齐到中心

包装器内两个跨度之一上的文本溢出省略号

使用 JavaScript 将 CSS 添加到 ？

Div Size 自动调整内容大小

边界半径应该剪辑内容吗？

如何强制显示垂直滚动条？

如何在 iOS 上获取带有 CSS 溢出的滚动条

如何使用 Bootstrap2 使 div 居中？

我应该使用最大设备宽度还是最大宽度？