Правильная сетка CSS

399

19 января 2017, 02:42

Нужно сделать правильную сетку с помощью CSS и желательно Flexbox. Вот так у меня выглядит сейчас...

Что тут не так:

Нижняя часть сетки не прижата к левому краю.
Не изменяется расстояние между элементами.

Единственное, что тут правильно более менее, это то, что сетка размещается по центру блока. Но тут тоже свой подвох, нужно чтобы максимальная ширина левого и правого расстояния были 30-40px, а далее уже менялось расстояние между самими элементами сетки. Прошу помочь, а то уже куча вариантов попробовал.

Высота и ширина элемента сетки 100px и отступ 2px, максимальный отступ слева и справа от блока с сеткой элементов — 35px.

Answer 1

Вам надо использовать display: inline-block для элементов и для контейнера присвоить text-align: justify;. Минимальное расстояние реализуется через padding:

.container { 
  padding: 2px; 
  border: 3px solid #464646; 
  background-color: #000; 
  padding-left: 35px; 
  padding-right: 35px; 
  text-align: justify; 
} 
 
.container__item { 
  display: inline-block; 
  width: 100px; 
  height: 100px; 
  margin: 2px; 
  background-color: #464646; 
}

<div class="container"> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
  <div class="container__item"></div> 
</div>

Затем для последней строчки рассчитывайте отступы с помощью JavaScript при resize.

UPDATE

Для того, чтобы не было отступов между элементами и в последней строке элементы выравнивались по левому краю оберните блок ещё одним:

.container { 
  padding: 2px; 
  border: 3px solid #464646; 
  background-color: #000; 
  padding-left: 35px; 
  padding-right: 35px; 
  display: flex; 
  justify-content: center; 
} 
 
.wrapper-center { 
   display: flex; 
   flex-wrap: wrap; 
} 
 
.container__item { 
  display: inline-block; 
  width: 100px; 
  height: 100px; 
  margin: 2px; 
  background-color: #464646; 
}

<div class="container"> 
  <div class="wrapper-center"> 
    <div class="container__item"></div> 
    <div class="container__item"></div> 
    <div class="container__item"></div> 
    <div class="container__item"></div> 
    <div class="container__item"></div> 
  </div> 
</div>

Answer 2

Если я вас правильно понял, то всё решается таким способом

.flexbox { 
  display: flex; 
  width: 312px; 
  max-width: 370px; 
  padding: 2px; 
  border: 3px solid #464646; 
  background-color: black; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  resize: both; 
  overflow: auto;  
} 
.flexbox__item { 
  display: block; 
  width: 100px; 
  height: 100px; 
  margin: 2px; 
  background-color: #464646; 
} 
 
/* Если блоков в конце 2 */ 
.flexbox__item:nth-child(3n+2):last-child { 
  margin-right: calc(100% - 200px - ((100% - 300px) / 2)); 
} 
/* Суть вычислений: от всей ширины отнимаем (количество блоков в конце умножить на ширину одного блока) и отнимаем (от общей ширины отнимает (максимальное количество блоков в конце умноженное на их ширину) и потом делим на колечество блоков размещённых в конце) */

<div class="flexbox"> 
  <div class="flexbox__item"></div> 
  <div class="flexbox__item"></div> 
  <div class="flexbox__item"></div> 
  <div class="flexbox__item"></div> 
  <div class="flexbox__item"></div> 
</div>