将包装物品放在网格的中心 [英] Place wrapping items in the center of the grid
问题描述
我有一个
没有可自动执行此操作的网格功能.它必须是作者定义的.
使用Flex ，不存在上述问题.但是需要权衡.Flex有一个Grid没有的问题.
它源于代码的这一部分:
.accordioninnergrid {显示:网格；grid-template-columns:repeat(auto-fit，minmax(240px，1fr));} grid-template-columns 规则是说，每列的最小宽度可以是240px，最大宽度可以是 1fr (即所有可用空间)
在flex中，代替 fr 函数使用的属性将是 flex-grow .
但是，由于在flex容器中没有列轨道阻碍跨行移动，因此 flex-grow 可以自由地在整个行中扩展项目.
简而言之，伸缩增长和居中不能并存.
如果删除了 flex-grow ，那么使用flex居中就不会有问题.但是，当然，还有一个折衷方案:您将失去对可用空间功能的使用:
.accordioninnergrid {显示:flex;flex-wrap:包装;证明内容:中心；}.内盒 {flex:1 0 140px;/* fg，fs，fb-尝试fg:0 */显示:flex;边框:1px纯黑色；flex-direction:列;align-items:居中;自动换行:断词；}.innerbox>p，img {利润率:1％；} < div class ="accordioninnergrid">< div class ="innerbox">< img src ="http://i.imgur.com/60PVLis.png" width ="50" height ="50" alt =">< p>这是文字</p>< p>小标语</p></div>< div class ="innerbox">< img src ="http://i.imgur.com/60PVLis.png" width ="50" height ="50" alt =">< p>这是文字</p>< p>小标语</p></div>< div class ="innerbox">< img src ="http://i.imgur.com/60PVLis.png" width ="50" height ="50" alt =">< p>这是文字</p>< p>小标语</p></div>< div class ="innerbox">< img src ="http://i.imgur.com/60PVLis.png" width ="50" height ="50" alt =">< p>这是文字</p>< p>小标语</p></div>< div class ="innerbox">< img src ="http://i.imgur.com/60PVLis.png" width ="50" height ="50" alt =">< p>这是文字</p>< p>小标语</p></div></div> 此处有更多详细信息:
I have a CSS Grid layout which looks like below:
This works perfectly for me, but when I lower the resolution of the screen, the grid's responsiveness makes the grid look like this:
Instead, I want the wrapping items to justify the left and right white spaces, and they should look like this:
How can I achieve the above? The items are dynamic in number. There can be even number of items which will make it look better as the left and right white spaces will be equally spaced. But if the items are odd in number the white spaces should still be equally distributed. I tried with grid-auto-flow and align-items, but they don't seem to be helping.
.accordioninnergrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.innerbox {
display: flex;
border: 1px solid black;
flex-direction: column;
align-items: center;
word-wrap: break-word;
width: auto;
}
.innerbox>p,
img {
margin: 1%;
}
<div class="accordioninnergrid">
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
</div>
This is a problematic layout with Grid or Flex. There's no simple solution with either.
With Grid, there's no way to automatically position items in the middle columns. How does the grid know it needs to place grid items in, let's say, columns 3, 4 and 5, so that they appear centered?
Worse, what if there were only four columns and one item to center? That item would have to span across columns 2 and 3.
There's no grid function that does this automatically. It must be author-defined.
With Flex, the problem above doesn't exist. But there's a trade-off. Flex has a problem that Grid doesn't have.
It stems from this section of the code:
.accordioninnergrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
The grid-template-columns rule is saying that each column can be a minimum width of 240px, and a maximum width of 1fr (i.e., all available space).
In flex, the property to use in place of the fr function would be flex-grow.
But, because there are no column tracks impeding movement across the line in a flex container, flex-grow is free to expand items across the entire line.
In short, flex-grow and centering cannot co-exist.
If flex-grow were removed, then you'd have no problem centering with flex. But, of course, there would be another trade-off: you would lose the consumption of free space feature:
.accordioninnergrid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.innerbox {
flex: 1 0 140px; /* fg, fs, fb -- try fg: 0 */
display: flex;
border: 1px solid black;
flex-direction: column;
align-items: center;
word-wrap: break-word;
}
.innerbox > p,
img {
margin: 1%;
}
<div class="accordioninnergrid">
<div class="innerbox">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
</div>
More details here:
- Aligning grid items across the entire row/column (like flex items can)
- Targeting flex items on the last or specific row
这篇关于将包装物品放在网格的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
