grid布局左右两边高度一样

linlinlove2

已于 2024-04-19 10:35:30 修改

阅读量232

点赞数 3

文章标签： php二次开发 grid布局前端开发 css html

于 2024-04-19 10:34:43 首次发布

本文链接：https://blog.csdn.net/withkai44/article/details/137956328

版权

演示效果在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	

<div class="container">  


    <div class="left-image">  
      <a href="">  <img src="niche-dating-apps.jpg" alt="Left Image">  </a>

    </div>  


    <div class="right-images">  

        <div class="right-image-box">  
            <img src="759x425.jpg" alt="Right Image 1">  
        </div> 
        <div class="right-image-box">  
            <img src="759x425.jpg" alt="Right Image 2">  
        </div>  
        <div class="right-image-box">  
            <img src="759x425.jpg" alt="Right Image 3">  
        </div>  
        <div class="right-image-box">  
            <img src="759x425.jpg" alt="Right Image 4">  
        </div>  
    </div> 


</div>

</body>
</html>

*{padding:0;margin:0;}
.container { 
 gap: 1px;  
    display: grid;  
    grid-template-columns: 1fr 1fr; /* 定义两列，各占50%宽度 */  
    grid-template-rows: auto; /* 行高自动，根据内容自适应 */  
    align-items: stretch; /* 默认值，确保子元素填充整个容器高度 */  
    /*height: 100vh; */
    /* 如果需要，可以设置容器的高度为视口高度 */  
}  
  
.left-image,  
.right-images {  
	position: relative;
    /* 不需要额外的 flex 属性，因为使用了 grid 布局 */  
}  
  
.left-image img,  
.right-image-box img {  
    width: 100%; /* 图片宽度占满容器 */  
    height: 100%; /* 图片高度自动，保持比例 */  
    object-fit: cover; /* 确保图片覆盖整个容器，同时保持其比例 */  
}  
  
.right-images {  
    display: grid;  
    grid-template-columns: repeat(2, 1fr); /* 定义两列 */  
    grid-template-rows: repeat(2, 1fr); /* 定义两行 */  
    gap: 2px; 
} 
  
.right-image-box {  
    /* 这里不需要额外的样式，除非你想要自定义每个图片框的外观 */  
}