[英]Centering grid items in an auto-fill container
I have set up a grid with two items. 我已经设置了一个包含两个项目的网格。 This grid can contain any number of items but two is enough for this example.
此网格可以包含任意数量的项目,但对于此示例,这两个项目就足够了。
In the example there are two gray boxes align to the left. 在该示例中,有两个灰色框对齐左侧。 Using an inspector on a wide screen (above 1000px) we can spot a third (or more) "shadow" item that fills up the rest of the space.
在宽屏幕(1000px以上)上使用检查器,我们可以发现填充剩余空间的第三个(或更多)“阴影”项目。
How can I center the boxes in the grid? 如何将网格框放在中心? Like the "shadow" item(s) does not exist.
就像“影子”项目不存在一样。
On the .grid
element I still want to use a grid because of the automatic media queries I don't need to write. 在
.grid
元素上,我仍然想使用网格,因为我不需要编写自动媒体查询。 On the wrapper, anything goes. 在包装器上,任何事情都会发生。
Also, a fixed width is not an option. 此外,固定宽度不是一种选择。
.wrap { display: flex; flex-direction: column; /*justify-content: center; align-items: center;*/ } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: 1rem; } .item { background: #eee; }
<div class="wrap"> <div class="grid"> <div class="item"> Item 1 </div> <div class="item"> Item 2 </div> </div> </div>
https://jsfiddle.net/1ymkg327/4/ https://jsfiddle.net/1ymkg327/4/
The most efficient solution to your problem is probably flexbox, as flex items are not confined to individual tracks (columns/rows) like grid items. 对您的问题最有效的解决方案可能是flexbox,因为flex项不限于单个轨道(列/行),如网格项。
.grid { display: flex; flex-wrap: wrap; margin-bottom: 1em; } .item { flex: 1 0 100px; background: #eee; text-align: center; border: 1px dashed gray; box-sizing: border-box; }
<div class="grid"> <div class="item">Item 1</div> </div> <div class="grid"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div> <div class="grid"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <div class="grid"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div>
But if you want to stick with Grid Layout, here are some issues to consider and a potential solution. 但是如果你想坚持网格布局,这里有一些需要考虑的问题和一个潜在的解决方案。
1fr
When you say 1fr
, like you do in your code, that means "consume all free space" . 当你说
1fr
,就像你在代码中那样,这意味着“消耗所有可用空间” 。 But when there is no free space, there can be no alignment. 但是当没有自由空间时,就没有对齐。
Keyword alignment properties (ie justify-*
and align-*
) work by distributing free space. 关键字对齐属性(即
justify-*
和align-*
)通过分配自由空间来工作。 They cannot left-align, right-align, space-between
, space-around
or center, without free space. 它们不能左对齐,右对齐,
space-between
, space-around
或中心,没有自由空间。
This isn't just Grid behavior. 这不仅仅是网格行为。 It's standard HTML/CSS: A
div
is a block-level element by default. 它是标准的HTML / CSS:默认情况下,
div
是块级元素。 This means it occupies 100% width of its parent. 这意味着它占据其父级的100%宽度。 So a
div
cannot be centered (unless you override the default settings). 因此
div
不能居中(除非您覆盖默认设置)。
Columns and rows in a grid extend across the entire container. 网格中的列和行在整个容器中延伸。 So once
auto-fill
creates, let's say, three columns, all following rows will have three columns. 因此,一旦
auto-fill
创建,比方说三列,所有后续行将有三列。
If the first row has three grid items and the second row has two grid items, there is still a third column going through (and occupying space) on the second row. 如果第一行有三个网格项而第二行有两个网格项,则第二行仍然有第三列(并占用空间)。 Therefore, the two items in the second row cannot be centered on the line.
因此,第二行中的两个项目不能在该行的中心。
auto-fill
When the repeat()
function is set to auto-fill
or auto-fit
, the container creates as many grid tracks as possible without overflowing the container. 当
repeat()
函数设置为auto-fill
或auto-fit
,容器会创建尽可能多的网格轨道而不会溢出容器。
With auto-fill
, when there are no grid items to fill all tracks created, those tracks are preserved . 使用
auto-fill
,如果没有网格项填充所有创建的轨道,则会保留这些轨道 。 Basically, the grid layout remains fixed, with or without items. 基本上,网格布局保持固定,有或没有项目。
You pointed this out in your question. 你在问题中指出了这一点。 You have two grid items, but other "shadow" items also exist.
您有两个网格项,但也存在其他“阴影”项。 Just note that these "shadow" items are not grid items.
请注意,这些“阴影”项不是网格项。 They are just empty grid cells.
它们只是空的网格单元格。
Because of the empty grid cells, there is no free space left for centering the grid items. 由于空的网格单元,没有剩余的空间用于使网格项居中。
auto-fit
The auto-fit
keyword does the same as auto-fill
, except for this: empty tracks are collapsed . auto-fit
关键字与auto-fill
相同,除此之外: 空轨道已折叠 。
In your case, since you have 1fr
set as the max-size in the minmax()
function, the extra space is distributed among both grid items. 在您的情况下,由于您在
minmax()
函数1fr
设置为max-size,因此额外空间将分布在两个网格项之间。
Again, centering is not possible, but this time because the fr
unit is consuming all free space (as explained in the 1fr
section above). 同样,居中是不可能的,但这次是因为
fr
单位消耗了所有空闲空间(如上面的1fr
部分所述)。
justify-content: center
As described above, centering the grid items is not possible because there is no free space available on the line for alignment purposes. 如上所述,不可能使网格项居中,因为为了对齐目的,线上没有可用的空闲空间。
One way around this, which still allows for flexible column sizes, is to use max-content
instead of 1fr
, along with auto-fit
. 解决此问题的一种方法是使用
max-content
而不是1fr
,以及auto-fit
。
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, max-content)); justify-content: center; grid-gap: 1rem; } .item { background: #eee; }
<div class="grid"> <div class="item">Item 1</div> </div> <hr> <div class="grid"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div> <hr> <div class="grid"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <hr> <div class="grid"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div>
The problem is that using auto-fill
you're creating a lot of empty columns, which makes justify-items:center
not behave as you'd expect it to. 问题是使用
auto-fill
你创建了很多空列,这使得justify-items:center
不像你期望的那样。
You need to use auto-fit
instead. 您需要使用
auto-fit
。
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 1rem;
justify-items:center;
}
https://jsfiddle.net/1ymkg327/36/ https://jsfiddle.net/1ymkg327/36/
That's because of the max value set with minmax
is too small. 这是因为
minmax
设置的最大值太小。
You need to set the max value to 50%. 您需要将最大值设置为50%。 Because you have
grid-gap:1rem
this become calc(50% - 1rem)
. 因为你有
grid-gap:1rem
这变成了calc(50% - 1rem)
。
See this fiddle: 看到这个小提琴:
https://jsfiddle.net/1ymkg327/24/ https://jsfiddle.net/1ymkg327/24/
EDIT: 编辑:
I unerstood your question now, and come up with the solution: 我现在理解你的问题,并提出解决方案:
https://jsfiddle.net/1ymkg327/40/ https://jsfiddle.net/1ymkg327/40/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.