Grid 如何从网格中提供空间
当我尝试在网格中显示块时，右侧网格项的末尾有空间，而左侧网格项的开头没有空间。您可以看到屏幕截图和代码。我想不出是什么问题。我希望你能弄明白Grid 如何从网格中提供空间,grid,Grid,当我尝试在网格中显示块时，右侧网格项的末尾有空间，而左侧网格项的开头没有空间。您可以看到屏幕截图和代码。我想不出是什么问题。我希望你能弄明白 项目 *{ 保证金：0； 填充：0； 框大小：边框框； } .网格部分{ 显示：网格； 网格模板柱：1fr 1fr； 间隙：10px； 边缘顶端：40px； 背景颜色：黄色； } .表格项目{ 背景色：红色； 宽度：500px； 高度：100px； } 网格 您可以使用 我已经编辑了你的代码，所以你可以在左右两边都有黄色的空格。我在第一节中添加了宽度，以
项目
*{
保证金：0；
填充：0；
框大小：边框框；
}
.网格部分{
显示：网格；
网格模板柱：1fr 1fr；
间隙：10px；
边缘顶端：40px；
背景颜色：黄色；
}
.表格项目{
背景色：红色；
宽度：500px；
高度：100px；
}
网格
<head>
<meta charset="utf-8" />
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(5, 1fr);
}
#item1 {
background-color: yellow;
grid-column: 1/2;
}
#item2 {
background-color: red;
grid-column: 2/4;
}
#item3 {
background-color: yellow;
grid-column: 4/5;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>
项目
* {
保证金：0；
填充：0；
框大小：边框框；
}
#网格{
显示：网格；
高度：100px；
网格模板列：重复（5，1fr）；
}
#项目1{
背景颜色：黄色；
网格柱：1/2；
}
#项目2{
背景色：红色；
网格柱：2/4；
}
#项目3{
背景颜色：黄色；
网格柱：4/5；
}
网格
<head>
<meta charset="utf-8" />
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(5, 1fr);
}
#item1 {
background-color: yellow;
grid-column: 1/2;
}
#item2 {
background-color: red;
grid-column: 2/4;
}
#item3 {
background-color: yellow;
grid-column: 4/5;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>
项目
* {
保证金：0；
填充：0；
框大小：边框框；
}
#网格{
显示：网格；
高度：100px；
网格模板列：重复（5，1fr）；
}
#项目1{
背景颜色：黄色；
网格柱：1/2；
}
#项目2{
背景色：红色；
网格柱：2/4；
}
#项目3{
背景颜色：黄色；
网格柱：4/5；
}
网格