如何让 CSS 网格容器保持响应式正方形大小? [英] How to make CSS grid container keep responsive square size?

问题描述

我希望网格容器保持方形.所以当屏幕调整大小时，它会变大或变小，但它的高度将始终与宽度相同.我想在里面放 3 张图片，上面一张占两列，下面一张是方形的，每列占一列.

HTML:

<img></img><img></img><img></img>

SASS:

.container: {背景:#fff;最大宽度:600px；填充:10px；}.网格 {显示:网格；网格模板列:1fr 1fr；网格模板行:1fr 1fr；间隙:10px；&>img:第一个孩子{网格列:1/跨度2；网格行:1；}图像{宽度:100%；背景色:#000；适合对象:覆盖；}}

我尝试向网格添加伪元素以保持平方比，结果发现它不适用于网格.我试着给 img height: 100% 但它太长了.

我发现了一些关于如何使图像保持方形的问题，但没有一个是关于如何保持网格容器方形并防止被儿童拉伸的问题.

解决方案

我会做以下事情:

1. 根据响应调整网格宽度和高度 - 为此使用

   I want grid container to maintain square shape. So when screen is resized, it will get bigger or smaller, but it's height will be always same as it's width. I want to place 3 images inside, with top one taking up two columns, and bottom ones are square taking one column each.

   HTML:

   <div class='container'>
       <div class='grid'>
           <img></img>
           <img></img>
           <img></img>
       </div>
   </div>
   

   SASS:

   .container: {
     background: #fff;
     max-width: 600px;
     padding: 10px;
   }
   
   .grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     gap: 10px;
   
     & > img:first-child {
       grid-column: 1 / span 2;
       grid-row: 1;
     }
   
     img {
       width: 100%;
       background-color: #000;
       object-fit: cover;
     }
   }
   

   I tried adding pseudo element to grid to maintain square ratio, only to find out that it won't work for grid. I tried giving img height: 100% but it made the too long.

   I found some questions about how to keep images inside square, but non of them was about how to keep grid container square and prevent from being stretched out by children.

   解决方案

   I'd do the following:

   1. Make the grid width and height responsively sized - for this use this method (.container and &::after pseudo element)
   2. Make the grid itself follow the square width and height of the container (.grid-wrapper)
   3. Use a container for the images, so that the containers resize inside the grid (1st row = 2 col wide, 2nd row = 2x1 col) (.grid-box)
   4. Use absolute positioned images in the divs, so they actually cover the divs

   HTML code:

   <div class='container'>
     <div class='grid-wrapper'>
       <div class='grid'>
         <div class="grid-box">
           <img src="https://picsum.photos/200/300"></img>
         </div>
         <div class="grid-box">
           <img src="https://picsum.photos/200/300"></img>
         </div>
         <div class="grid-box">
           <img src="https://picsum.photos/200/300"></img>
         </div>
       </div>
     </div>
   </div>
   

   SASS code:

   $-gutter: 10px;
   $-max-width: 600px;
   
   * {
     box-sizing: border-box;
   }
   
   .container {
     position: relative;
     max-width: $-max-width;
     width: 100%;
     background: #ffff00;
   
     &::after {
       content: "";
       display: block;
       padding-bottom: 100%;
     }
   }
   
   .grid-wrapper {
     position: absolute;
     width: 100%;
     height: 100%;
     padding: $-gutter;
   }
   
   .grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     gap: $-gutter;
     width: 100%;
     height: 100%;
   
     &-box {
       position: relative;
       width: 100%;
       height: 100%;
   
       &:first-child {
         grid-column: 1 / span 2;
       }
     }
   
     img {
       position: absolute;
       width: 100%;
       height: 100%;
       background-color: #000000;
       object-fit: cover;
     }
   }
   

   Here is a Fiddle demo: https://jsfiddle.net/robertp/uLfj1swm/

   And a screenshot of how this solution renders:

   这篇关于如何让 CSS 网格容器保持响应式正方形大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！