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

#html #css #css3 #вёрстка #flexbox

Нужно сделать правильную сетку с помощью CSS и желательно Flexbox. 

Вот так у меня выглядит сейчас:



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


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


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

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

Ответы

Ответ 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;
}

  

  

  

  

  






Затем для последней строчки рассчитывайте отступы с помощью 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 {
  width: 100px;
  height: 100px;
  margin: 2px;
  background-color: #464646;
}

  

    

    

    

    

    

  



Ответ 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));
}
/* Суть вычислений: от всей ширины отнимаем (количество блоков в конце умножить на
ширину одного блока) и отнимаем (от общей ширины отнимает (максимальное количество
блоков в конце умноженное на их ширину) и потом делим на колечество блоков размещённых
в конце) */

  

  

  

  

  






К сожалению для space-around не знаю как сделать, так как не знаю, как высчитать
размеры отступом по бокам


Ответ 3

1) Попробуйте грид

На каждой строке поместится максимум блоков, последняя строка встанет по общему левому
краю, а весь массив блоков выровняется по центру страницы.

Вот короткое знакомство с гридами. Вот игра по их базовым свойствам.

Опера-мини не поддерживает грид. А Эксплорер и Эйдж поддерживают только старую версию
гридов, которая настолько отличается от нынешней, что приведённым здесь решением воспользоваться
не удастся. (Спасибо Вадиму Овчинникову за комментарий.) 

Решение взял из этой статьи.

Чтобы блоки держались кучно по центру страницы, их родителю нужно свойство justify-content:
center;: https://codepen.io/glebkema/pen/gRjmwd

Чтобы блоки заполняли страницу по ширине, а по краям оставался отступ, можно увеличить
padding и поменять justify-content на space-between: https://codepen.io/glebkema/pen/YQjrZb



.grid {
  background-color: #333;
  display: grid;
  padding: 12px 30px;
  grid-gap: 3px;
  grid-template-columns: repeat(auto-fit, 100px);
  justify-content: space-between;
}
.grid__item {
  display: block;
  width: 100px;
  height: 100px;
  background-color: black;
}

  

  

  

  

  

  

  

  

  






2) Инлайн-блоки и псевдо-элемент

На том же сайте есть решение без флекса и грида. Понимаю его так:


Создаём в основном блоке псевдоэлемент из цепочки слов и пробелов. В качестве «псевдослова»
используем букву i, потому что она самая тонкая и её размер легче предсказать: content:
'i i i i i i i i i i';.
Эти "псевдослова" дополнят собой последнюю строку. Поэтому последняя строка станет
предпоследней, и её блоки начнут повторять расположение блоков в предшествующих строках.
Чтобы это произошло, количества i должно хватить, даже если в строке окажется только
один «настоящий» элемент.
С помощью padding-left и word-spacing добиваемся, чтобы каждое "псевдослово" занимало
столько же места, сколько занимает «настоящий» блок с отступами.
Чтобы i не мозолили глаза, назначаем им visibility: hidden;.
Хвост из невидимых i добавляет вертикальный отступ в конце общего блока. Чтобы сделать
его поменьше, задаём псевдоэлементу шрифт помельче. (Но не ноль, а то он не выполнит
свою задачу.)


https://codepen.io/glebkema/pen/awjJxE



.grid {
  background-color: #333;
  font-size: 0;
  padding: 12px 30px;
  text-align: justify;
}
.grid:after {
  content: ' i i i i i i i i i i i i ';
  font-family: sans-serif;
  font-size: 1px;
  padding-left: 103px;
  visibility: hidden;
  word-spacing: 103px;
}
.grid__item {
  background: black;
  display : inline-block;
  margin: 2px;
  vertical-align: top;
  width : 100px; height: 100px;
  /* эмуляция inline-block для IE6-7*/
  //display : inline;
  //zoom : 1;
}

  

  

  

  

  

  

  

  

  




Ответ 4

.grid {
    background-color: #333;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      justify-content: space-between;
      padding: 0 30px;
    }

.grid__item {
  display: block;
  width: 100px;
  height: 100px;
  margin: 2px;
  background-color: black;
}