缩小网格项，就像CSS中的flex项一样 [英] Shrink grid items just like flex items in css

问题描述

是否可以像CSS中的flex项一样收缩网格项？

网格项

  .container {display：grid; grid-gap：10px; grid-template-columns：repeat（auto-fill，minmax（200px，1fr））;}。child {display：flex; flex-flow：行换行； align-items：居中;证明内容：中心；填充：5px； border：3px solid＃a07;}  

 < div类=容器> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div>< / div>  

jsfiddle

弹性商品

  .container {display：flex;左边距：-10px; flex-flow：行换行；}。child {display：flex; flex-flow：行换行； align-items：居中;证明内容：中心；填充：5px；边框：3px实线＃a07; flex：200px 1 1;左边距：10px; margin-bottom：10px;}  

 < div class = 容器> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div>< / div>  

jsfiddle

我可以在上方的flex中，元素的位置如下：

在此处输入图像描述

尽管我无法通过使用网格布局实现相同的行为。 Flex布局允许项目在小屏幕上缩小，而网格布局则不允许。同时，我想保留这样的行为，即只有在这样放置之后，每个项目都不小于特定大小（在我们的例子中为200px）时，项目才会与另一个项目一起移动到下一行。 p>

我正在使用网格布局，因为它可以保留所有子代的宽度相同的不变性。如果使用flex版式，则最后一个项目如果单独放在行中，则将被拉伸到整行。

解决方案

一个解决方案是为依赖视口单位的子元素指定最大宽度，因为百分比值是相对于 minmax（ ）不能使用。此解决方案不是通用的，您需要根据每种情况调整值。

例如，在您的情况下，我们可以使用 100vw ，因为容器是体内唯一的元素，并且占据了整个宽度：

  .container {display：grid; grid-gap：10px; grid-template-columns：repeat（auto-fill，minmax（200px，1fr））;}。child {display：flex; align-items：居中;证明内容：中心；填充：5px；边框：3px实线＃a07;最大宽度：100vw; box-sizing：border-box; / *不要忘记这个！* /} body {margin：0;}  

 < div class = container> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div>< / div>  

在最大宽度计算中，您需要考虑更多元素或一些填充/边距：

  .container {display：grid; grid-gap：10px; grid-template-columns：repeat（auto-fill，minmax（200px，1fr））;}。child {display：flex; align-items：居中;证明内容：中心；填充：5px；边框：3px实线＃a07; max-width：calc（100vw-40px）; / *我们删除了主体边距* / box-sizing：border-box; } body {margin：0 20px; }  

 < div class = container> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div> < div class = child>文字< / div>< / div>  

我们不再有2个约束，而是3个：

• 网格单元的最小尺寸为 200px


• 网格单元将填充剩余空间


• 网格单元内的元素具有相对于屏幕尺寸定义的最大尺寸。 （我们缺少收缩约束）

Is it possible to shrink grid items just like flex items in css?

Grid items

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
}

<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

jsfiddle

Flex items

.container {
  display: flex;
  margin-left: -10px;
  flex-flow: row wrap;
}

.child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
  flex: 200px 1 1;
  margin-left: 10px;
  margin-bottom: 10px;
}

<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

jsfiddle

In a nutshell I can have the following positioning of the elements with the flex above:

enter image description here

While I can not achieve the same behaviour by using a grid layout. Flex layout allows items to shrink on small screen, while grid layout does not allow. At the same time I would like to preserve the behavior that the item will move to the next line with another item only when after such a placement each one of them will be no shorter than a specific size (200px in our case).

I am using grid layout because it allows to preserve the invariant that widths of all the children will be the same. With flex layout the last item will be stretched to the whole line if it will be alone on the line.

解决方案

One solution is to specify a max-width to the child element relying on the viewport unit since percentage values are relative to the size of the track defined by the minmax() and cannot be used. This solution isn't generic and you need to adjust the value depending on each situation.

In you case for example, we can use 100vw since the container is the only element in the body and is taking the whole width:

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
  max-width:100vw;
  box-sizing:border-box; /* Don't forget this !*/
}

body {
  margin:0;
}

<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

In case there is more element or some padding/margin you need to consider them within the max-width calculation:

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
  max-width:calc(100vw - 40px); /*we remove the body margin*/
  box-sizing:border-box; 
}

body {
  margin:0 20px; 
}

<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

It's like we no more have 2 constraints but 3:

• The grid cell has a minimum size of 200px
• The grid cell fill the remain space
• The element inside the grid cell has a maximum size defined relatively to the screen size. (the shrink constraint we were missing)

这篇关于缩小网格项，就像CSS中的flex项一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！