Html CSS 网格环绕

Question

提问by kentcdodds

Is it possible to make a CSS grid wrap without using media queries?

是否可以在不使用媒体查询的情况下制作 CSS 网格包装？

In my case, I have a non-deterministic number of items that I want placed in a grid and I want that grid to wrap. Using Flexbox, I'm unable to reliably space things nicely. I'd like to avoid a bunch of media queries too.

就我而言，我有一个不确定数量的项目要放置在网格中，并且我希望该网格被包裹。使用 Flexbox，我无法可靠地很好地分隔事物。我也想避免一堆媒体查询。

Here's some sample code:

这是一些示例代码：

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

And here's a GIF image:

这是一个 GIF 图像：

As a side-note, if anyone can tell me how I could avoid specifying the width of all the items like I am with grid-template-columnsthat would be great. I'd prefer the children to specify their own width.

作为旁注，如果有人能告诉我如何避免像我一样指定所有项目的宽度grid-template-columns，那就太好了。我更喜欢孩子们指定他们自己的宽度。

Answer 1

回答by Ricky

Use either auto-fillor auto-fitas the repetition number of the repeat()notation.

使用auto-fill或auto-fit作为repeat()符号的重复数。

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

`auto-fill`

When auto-fillis given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.

当auto-fill作为重复次数给出时，如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是不会导致网格溢出其网格容器的最大可能正整数。

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

The grid will repeat as many tracks as possible without overflowing its container.

网格将在不溢出其容器的情况下重复尽可能多的轨道。

In this case, given the example above (see image), only 5 tracks can fit the grid-container without overflowing. There are only 4 items in our grid, so a fifth one is created as an empty track within the remaining space.

在这种情况下，鉴于上面的示例（见图），只有 5 个轨道可以适合网格容器而不会溢出。我们的网格中只有 4 个项目，因此在剩余空间内创建了第五个项目作为空轨道。

The rest of the remaining space, track #6, ends the explicit grid. This means there was not enough space to place another track.

剩余空间的其余部分，轨道#6，结束显式网格。这意味着没有足够的空间来放置另一条轨道。

`auto-fit`

The auto-fitkeyword behaves the same as auto-fill, except that after grid item placement algorithmany empty tracks within the remaining space will be collapsed to 0.

该auto-fit关键字的行为一样auto-fill，只是后电网项目布局算法的剩余空间内的任何空轨迹会晕倒0。

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

The grid will still repeat as many tracks as possible without overflowing its container, but the empty tracks will be collapsed to 0.

网格仍将重复尽可能多的轨道而不溢出其容器，但空轨道将折叠为0。

A collapsed track is treated as having a fixed track sizing function of 0px.

折叠的轨道被视为具有固定的轨道大小函数0px。

Unlike the auto-fillimage example, the empty fifth track is collapsed, ending the explicit grid right after the 4th item.

与auto-fill图像示例不同，第 5 个空轨道被折叠，在第 4 个项目之后立即结束显式网格。

`auto-fill`vs `auto-fit`

`auto-fill`对比 `auto-fit`

The difference between the two is noticeable when the minmax()function is used.

minmax()使用该功能时，两者之间的区别很明显。

Use minmax(186px, 1fr)to range the items from 186pxto 186pxplus a fraction of the leftover space in the grid container.

用于minmax(186px, 1fr)将项目范围从186px到186px加上网格容器中剩余空间的一小部分。

When using auto-fill, the items will grow once there is no space to place empty tracks.

使用时auto-fill，一旦没有空间放置空轨道，项目就会增长。

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

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

When using auto-fit, the items will grow to fill the remaining space because all the empty tracks are collapsed to 0px.

使用时auto-fit，项目将增长以填充剩余空间，因为所有空轨道都折叠为0px。

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

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Playground:

操场：

CodePen

代码笔

Inspecting auto-fill tracks

检查自动填充轨道

Inspecting auto-fit tracks

检查自动适应轨道

Answer 2

回答by keithjgrant

You want either auto-fitor auto-fillinside the repeat()function:

您想要auto-fit或auto-fill在repeat()函数内部：

grid-template-columns: repeat(auto-fit, 186px);

The difference between the two becomes apparent if you also use a minmax()to allow for flexible column sizes:

如果您还使用 aminmax()来允许灵活的列大小，则两者之间的差异将变得明显：

grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

This allows your columns to flex in size, ranging from 186 pixels to equal-width columns stretching across the full width of the container. auto-fillwill create as many columns as will fit in the width. If, say, five columns fit, even though you have only four grid items, there will be a fifth empty column:

这允许您的列在大小上进行调整，范围从 186 像素到横跨容器整个宽度的等宽列。auto-fill将创建适合宽度的尽可能多的列。例如，如果适合五列，即使您只有四个网格项，也会有第五个空列：

Using auto-fitinstead will prevent empty columns, stretching yours further if necessary:

使用auto-fit代替将防止空列，如有必要，进一步扩展您的列：

Answer 3

回答by alanbuchanan

You may be looking for auto-fill:

您可能正在寻找auto-fill：

grid-template-columns: repeat(auto-fill, 186px);

Demo: http://codepen.io/alanbuchanan/pen/wJRMox

演示：http: //codepen.io/alanbuchanan/pen/wJRMox

To use up the available space more efficiently, you could use minmax, and pass in autoas the second argument:

要更有效地使用可用空间，您可以使用minmax, 并auto作为第二个参数传入：

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

Demo: http://codepen.io/alanbuchanan/pen/jBXWLR

演示：http: //codepen.io/alanbuchanan/pen/jBXWLR

If you don't want the empty columns, you could use auto-fitinstead of auto-fill.

如果您不想要空列，则可以使用auto-fit代替auto-fill.

Answer 4

回答by farrellw

I had a similar situation. On top of what you did, I wanted to center my columns in the container while not allowing empty columns to for them left or right:

我也有类似的情况。除了你所做的，我想将我的列在容器中居中，同时不允许向左或向右空列：

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}

Answer 5

回答by I haz kode

Here's my attempt. Excuse the fluff,I was feeling extra creative.

这是我的尝试。对不起，我觉得自己很有创意。

My method is a parent divwith fixeddimensions. The rest is just fitting the content inside that div accordingly.

我的方法是div具有固定尺寸的父级。其余的只是相应地拟合该 div 中的内容。

This will rescalethe images regardless of the aspect ratio. There will be no hard croppingeither.

无论纵横比如何，这都会重新缩放图像。将有没有硬裁剪无论是。

body {
    background: #131418;
    text-align: center;
    margin: 0 auto;
}

.my-image-parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    line-height: 300px; /* Should match your div height */
    text-align: center;
    font-size: 0;
}

/* Start demonstration background fluff */
    .bg1 {background: url(https://unsplash.it/801/799);}
    .bg2 {background: url(https://unsplash.it/799/800);}
    .bg3 {background: url(https://unsplash.it/800/799);}
    .bg4 {background: url(https://unsplash.it/801/801);}
    .bg5 {background: url(https://unsplash.it/802/800);}
    .bg6 {background: url(https://unsplash.it/800/802);}
    .bg7 {background: url(https://unsplash.it/802/802);}
    .bg8 {background: url(https://unsplash.it/803/800);}
    .bg9 {background: url(https://unsplash.it/800/803);}
    .bg10 {background: url(https://unsplash.it/803/803);}
    .bg11 {background: url(https://unsplash.it/803/799);}
    .bg12 {background: url(https://unsplash.it/799/803);}
    .bg13 {background: url(https://unsplash.it/806/799);}
    .bg14 {background: url(https://unsplash.it/805/799);}
    .bg15 {background: url(https://unsplash.it/798/804);}
    .bg16 {background: url(https://unsplash.it/804/799);}
    .bg17 {background: url(https://unsplash.it/804/804);}
    .bg18 {background: url(https://unsplash.it/799/804);}
    .bg19 {background: url(https://unsplash.it/798/803);}
    .bg20 {background: url(https://unsplash.it/803/797);}
/* end demonstration background fluff */

.my-image {
    width: auto;
    height: 100%;
    vertical-align: middle;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="my-image-parent">
    <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg4"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg5"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg6"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg7"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg8"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg9"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg10"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg11"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg12"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg13"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg14"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg15"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg16"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg17"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg18"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg19"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg20"></div>
</div>

Html CSS 网格环绕

提问by kentcdodds

回答by Ricky

`auto-fill`

`auto-fill`

`auto-fit`

`auto-fit`

`auto-fill`vs `auto-fit`

`auto-fill`对比 `auto-fit`

CodePen

代码笔

回答by keithjgrant

回答by alanbuchanan

回答by farrellw

回答by I haz kode

相关推荐

最近更新

标签

Html CSS 网格环绕

提问by kentcdodds

回答by Ricky

auto-fill

auto-fill

auto-fit

auto-fit

auto-fillvs auto-fit

auto-fill对比 auto-fit

CodePen

代码笔

回答by keithjgrant

回答by alanbuchanan

回答by farrellw

回答by I haz kode

相关推荐

Html 如何将动态数据绑定到 ARIA-LABEL？

Html 我的 CSS 有什么问题，将窗口调整为较小尺寸时元素会移动和重叠？

Html <th align'"center"> 不适用于引导表。可能是什么原因？

Html 在 Jade 文件中连接变量 + 字符串

相关推荐

最近更新

标签

`auto-fill`

`auto-fill`

`auto-fit`

`auto-fit`

`auto-fill`vs `auto-fit`

`auto-fill`对比 `auto-fit`