Как центрировать реагирующую сетку

Я пытаюсь построить страницу с сеткой изображений (все 300 пикселей на 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>

источник

2016-04-20 DJ.S

Попробуйте это:

.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; 
    } 
...

Оставьте остальное, как это.

NB: Если вам нужна поддержка IE7, может возникнуть проблема с встроенным блоком на блоке.

источник

2016-04-20 03:37:12

hi j-samah, я попробовал, но это не сработало ... :( –

Кажется, что здесь сосредоточено: https://jsfiddle.net/w4xx9y33/4/ В противном случае я предлагаю использовать фреймворк CSS, например Bootstrap или Foundation. Было бы проще управлять вашей гибкой сетью. Http://foundation.zurb.com/sites/docs/grid.html –

Большое вам спасибо! –

Возможно, используйте технологию flexbox для достижения того, чего вы хотите.

Проверьте ниже ссылки на страницы

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

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

источник

2016-04-20 03:32:27 nzkks

hi ShanthoshK, в обоих примерах размеры изображений изменяются при изменении размера окна - это не то поведение, которое я ищу. Кроме того, в обоих примерах сетка не центрируется. Они оба выровнены по левому краю. –

В последних версиях Bootstrap и Zurb используются методы FlexBox, которые я предполагаю. Я предложил новую технику CSS, чтобы избежать рамки CSS для небольшой потребности. Это тебе решать. – nzkks

Как центрировать реагирующую сетку

ответ

Смежные вопросы