как сделать 2x2 CSS сетку - PullRequest
Новая
       15

как сделать 2x2 CSS сетку

0 голосов
/ 15 марта 2019

Я студентка факультета журналистики, и я не могу понять, как сделать CSS для рабочей сетки изображений 2x2, сначала изображения были в ряд, теперь они очень растянуты в столбце. Может кто-нибудь помочь мне разобраться, как это сделать? (фото моего кода) 

/* Work Layout */
.work div {
  display: flex;
  flex-flow: wrap;
  width: 150px;
  height: 300px;
}
.img {
  "images/benbball.jpg"
  width: 50px;
}

Ответы [ 2 ]

2 голосов
/ 15 марта 2019

Все, что вам нужно сделать, это настроить контейнер для хранения всех ваших изображений и установить float: left и width: 50% на вашем дочернем img селекторе. Поскольку для width установлено значение 50%, только два смогут поместиться в каждом ряду, а следующие два будут перенесены в следующий ряд.

Это можно увидеть в следующем: 

.container img {
  float: left;
  width: 50%;
}
<div class="container">
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
</div>

Если вам нужно пространство между изображениями, вам нужно дать каждому индивидууму <img> родительский содержащий элемент для включения float: left и width: 50%, с дополнительным ограниченным width и необязательным margin на ребенка <img>. Для лучшего эффекта это будет ширина, определяемая расчетом, которая составляет 100% минус поля: 

.container .image {
  width: 50%;
  float: left;
}

.container img {
  width: calc(100% - (20px * 2));
  margin: 20px;
}
<div class="container">
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
</div>

Или, если вы хотите использовать flexbox, вам нужно установить display: flex и flex-wrap: wrap для контейнера: 

.container {
  display: flex;
  flex-wrap: wrap;
}

.container .image {
  width: 50%;
}

.container img {
  width: calc(100% - (20px * 2));
  margin: 20px;
}
<div class="container">
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
  <div class="image">
    <img src="http://placehold.it/50" />
  </div>
</div>

С flexbox вам не понадобится float: left.

0 голосов
/ 15 марта 2019

CSS Grid 

.wrapper {
  display: inline-grid;
  grid-template-columns: repeat(2, [col-start] 1fr);
  grid-gap: 10px;
}


<div class="grid">
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
</div>
...