如何将我的网格列开始扩展到网格列末端，使其仅占当前网格大小的一半。
如何将我的网格列开始扩展到网格列末端，使其仅占当前网格大小的一半。
提问于 2021-11-11 08:27:01
在这段代码中，我包含了我的代码这里。我想要实现的是，按宽度计算，方框8和9占当前网格大小的一半。因此，方框8和9应该与整个网格宽度一起，并在方框3的右下角相交。我写这是反应，但这不应该是重要的目的，我正在做的。
const Grid = () => {
return ( <
div class = 'container' >
<
div class = 'cell cell-1' > 1. < /div> <
div class = 'cell cell-2' > 2. < /div> <
div class = 'cell cell-3' > 3. < /div> <
div class = 'cell cell-4' > 4. < /div> <
div class = 'cell cell-5' > 5. < /div> <
div class = 'cell cell-6' > 6. < /div> <
div class = 'cell cell-7' > 7. < /div> <
div class = 'cell cell-8' > 8. < /div> <
div class = 'cell cell-9' > 9. < /div> < /
div >
);
};
const App = () => {
return ( <
div >
<
Grid / >
<
/div>
);
};
ReactDOM.render( <
React.StrictMode >
<
App / >
<
/React.StrictMode>,
document.getElementById('root')
);.container {
height: 90vh;
margin: 2rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 3px;
}
.cell {
color: white;
font-size: 3rem;
text-align: center;
padding: 4rem;
}
.cell-1 {
background: deepskyblue;
grid-row-start: 1;
grid-row-end: 3;
}
.cell-2 {
background: orange;
}
.cell-3 {
background: royalblue;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 3;
}
.cell-4 {
background: gold;
}
.cell-5 {
background: blueviolet;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 5;
}
.cell-6 {
background: limegreen;
}
.cell-7 {
background: coral;
}
.cell-8 {
background: lightseagreen;
grid-row-start: 3;
grid-column-start: 1;
}
.cell-9 {
background: maroon;
grid-row-start: 3;
}
.cell-10 {
background: mediumaquamarine;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-11-11 10:47:12
您可以检查以下代码这里
我已经添加了一个宽度属性和网格列结束。它将在不改变html结构的情况下工作。
.cell-8 {
background: lightseagreen;
grid-row-start: 3;
grid-column-start: 1;
grid-column-end: 3;
width: 104.8%;
left: 0;
item-self: flex-end;
}
.cell-9 {
background: maroon;
width: 104.8%;
grid-column-start: 4;
grid-column-end: 6;
justify-self: flex-end;
}谢谢
Stack Overflow用户
发布于 2021-11-11 08:36:19
只需在方框8和9中添加网格列尾即可。
.cell-8 {
background: lightseagreen;
grid-row-start: 3;
grid-column-start: 1;
grid-column-end: 4;
}
.cell-9 {
background: maroon;
grid-row-start: 3;
grid-column-start: 4;
grid-column-end: 6;
}更新：
.container {
height: 90vh;
margin: 2rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 3px;
}
.cell {
color: white;
font-size: 3rem;
text-align: center;
padding: 4rem;
}
.cell-1 {
background: deepskyblue;
grid-row-start: 1;
grid-row-end: 3;
}
.cell-2 {
background: orange;
}
.cell-3 {
background: royalblue;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 5;
}
.cell-4 {
background: gold;
}
.cell-5 {
background: blueviolet;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 5;
}
.cell-6 {
background: limegreen;
}
.cell-7 {
background: coral;
}
.cell-8 {
background: lightseagreen;
grid-row-start: 3;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 3;
}
.cell-9 {
background: maroon;
grid-row-start: 3;
grid-column-start: 4;
grid-column-end: 7
}
.cell-10 {
background: mediumaquamarine;
grid-row-start: 3;
grid-column-start: 5;
grid-column-end: 6;
}另一个解决方案
将方框8和9分开到另一个div。查看这里
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69925185
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号