时间戳

首页 > 解决方案 > 为什么网格元素不能正确跨越、定位和调整大小？

html - 为什么网格元素不能正确跨越、定位和调整大小？

问题描述

我有一个包含六个图像的简单网格，带有以下 html 模板：-

<div class="why-edukashi">
    <div>
        <img src="../project/extras-2.jpg" class="normal">
        <h3>Quality Education</h3>
    </div>
    <div>
        <img src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg" class="normal">
        <h3>Interactive Learning</h3>
    </div>
    <div>
        <img src="../project/group_sessions.jpg" class="normal">
        <h3>Group Sessions</h3>
    </div>
    <div>
        <img src="../project/quality_edu.jpg" class="normal">
        <h3>Concept clarity and Practical education</h3>
    </div>
    <div>
        <img src="../project/home.jpg" class="normal">
        <h3>Unlimited Resources</h3>
    </div>
    <div>
        <img src="../project/girls.jpg" class="large">
        <h3>We got these..</h3>
    </div>
</div>

我想要的只是将它们并排排列成一个 3 x 2 的矩形！有点像这样：

https://irdjigs.com/uploads/irdjigs/grid.png

但它们甚至没有跨越，我也无法正确定位或调整它们的大小！

这是我尝试过的 CSS（没有跨度）：

  .why-edukashi{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto auto;
  }
      

  .normal{
        margin: 0;
        padding: 15px;
        height: 40%; /*The height property is also not able  to resize every image (of "normal" class)*/
        width: auto;
    }

然后试试这个。。

.why-edukashi{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto auto;
}
.normal{
    padding: 0;
    margin: 0;
    grid-column: 1 / 4;
    grid-row: 1 / 3;
 }

由于跨越，网格没有变化！替代品grid-column: span 3也没有任何改变！

我也在 grid-template 中尝试了不同的值，比如 percent 、 minmax 等，但仍然无法定位和调整大小！其他属性grid-auto-flow（设置为dense）和size属性（用于调整大小）也不起作用！

您能否解释一下设计 CSS 网格的正确方法？

标签： htmlcsscss-grid

解决方案

我使用表格标签来设计网格布局。我在我的 html 文件中包含了 css。根据您的意愿，您可以使用单独的 css 文件。

 <html>
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="0" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />

                      <style>
        .image_item{
        width:450px;
        height:300px;
        }
       </style>

         </head>

        <body>

<table style="text-align:center; margin-left:auto; margin-right:auto;">
    <tr>
        <td>
            
                    <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>
        </td>
                
        <td>
            <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>  
        </td>

        <td>
            <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>  
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>  
        </td>

        <td>
            <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>  
        </td>

        <td>
            <div>
                <img class="image_item" src="https://image.freepik.com/free-vector/isometric-education-background_23-2148100136.jpg">
                <p class="title">Quality Education</p>
                    </div>  
        </td>


    </tr>
</table>

        </body>
    </html>

推荐阅读