0

введите сюда описание изображения

Я хочу чтобы в ряд стояло 20 квадратов.

Код не могу вставить, не получается.

1
  • Я просто хочу сделать координатную сетку. 16 сен 2019 в 16:14

1 ответ 1

2

Я хочу чтобы в ряд стояло 20 квадратов

Просто ряд из 20 блоков с помощью CSS Grid?

Я так понимаю, принципиально, чтобы сохранялись пропорции и они всегда оставались квадратами?

Так?

.grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-gap: 5px;
}

.item {
  background: blue;
}

.item__inner {
  height: 0;
  padding-bottom: 100%;
}
<div class="grid">
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
  <div class="item">
    <div class="item__inner"></div>
  </div>
</div>

введите сюда описание изображения

3
  • Спасибо! А подскажи, как сделать вертикальный раздел? prnt.sc/p6vfp1 16 сен 2019 в 16:10
  • Вопрос о промежутке между блоками? Он задаётся через свойство grid-gap:5px (вместо 5px подставить нужное значение)
    – hisbvdis
    16 сен 2019 в 16:25
  • @MrRiseYTMrRise, если ответ помог, просьба пометить его решением. Скриншот галочки отметки: bit.ly/2Hss3VA
    – hisbvdis
    16 сен 2019 в 17:05

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.