时间戳

首页 > 解决方案 > 我怎样才能从网格中给空间

grid - 我怎样才能从网格中给空间

问题描述

当我尝试在网格中显示块时，右侧网格项的末尾有空间，而网格的开头（即左侧）没有空间。你可以看到截图和代码。我无法弄清楚是什么问题。我希望你能弄清楚。在此处输入图像描述

<html lang="en">
    <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; 
          }
        .gird-section{
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 10px;
             margin-top: 40px;
             background-color: yellow;    
         }
        .grid-item{
             background-color: red;
             width: 500px;
             height: 100px;

          }

       </style>
     </head>
<body>
 
    <h1>Grid</h1>
    <div class="gird-section">

        <div class="grid-item"></div>
        <div class="grid-item"></div>
      
    </div>
</body>
</html>

标签： grid

解决方案

您可以使用Css 网格布局

我已经编辑了你的代码，所以你可以左右有黄色空间。我在第一部分添加了宽度，以便父级与子级有更多。如需更多编辑，我建议观看上面的链接。

<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>

推荐阅读