如何居中响应网格

Question

我正在尝试构建一个包含图像网格的页面（所有 300 像素 x 300 像素）。调整大小时：图片大小不变，但每行多余的图片会掉落到下一行。

我现在在 JSFiddle 上的内容： https://jsfiddle.net/xixi/w4xx9y33/

大部分情况下工作正常，但我真的很想让网格始终居中，而不是左对齐。就像Pinterest.com

上的图钉网格

在此先感谢您的帮助！

<body>
  <div class="grid">
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
    <div class="grid_item"><img src="https://www.dropbox.com/s/rhuivuugas64swf/test.jpg?dl=0"></div>
  </div>
</body>

Answer 1

可能使用 flexbox 技术来实现你想要的。

查看以下参考页面

http://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/

https://css-tricks.com/seamless-responsive-photo-grid/

Answer 2

试试这个：

.grid_item {
    @include rowMachine(1, 10%);
    display: inline-block;
    background: none;
    padding: 10px;
    position: relative;

    @media (min-width: 500px) {
        @include rowMachine(2, 5%);
        float: left;
    }
...

其余的保持原样。

注意：如果您需要 IE7 支持，您可能会遇到块上的内联块问题。

如何居中响应网格

How to center responsive grid

css

grid

center

web

responsive