iNext10
@iNext10
Web Developing (Front End) Junior

Как лучше сверстать это?

Есть вот такой сайт-портфолио:
5e97218c821e7944671352.png

Как его лучше сверстать?
Допустим, есть div-обёртка с классом "works"
В нём я хочу через FlexBox сделать несколько линий по 5 картинок в каждую:

5e974604029c1507467622.png

Какие есть варианты вёрстки?
У меня на уме это:
<div class="works">
    <div class="first-line">
        img*5
    </div>
    <div class="second-line">
        img*5
    </div>
    <div class="fourth-line">
        img*5
    </div>
    <div class="fifth-line">
        img*5
    </div>
</div>


Но мне кажется, это далеко не самое лучшее решение, ведь нужно будет каждому блоку "line" задать FlexBox стили.
  • Вопрос задан
  • 464 просмотра
Решения вопроса 6
sniggering_deus
@sniggering_deus Куратор тега CSS
One Morning Left - Words Won`t Save You
Например так с помощью гридов, чтобы долго не напрягаться:

.line {
width: 100%;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}


<div class="works">
    <div class="line">
        img*5
    </div>
  <div class="line">
        img*5
    </div>
    <div class="line">
        img*5
    </div>
    <div class="line">
        img*5
    </div>
    <div class="line">
        img*5
    </div>
</div>
Ответ написан
Решение, когда карточки внутри вёрстки поделены на блоки по 5 штук, не самое лучшее. Потому что экраны есть разные. На телефоне надо 2-3 штуки в ряд, на компе 5 штук, а на планшете, может быть, 4 штуки. Чтобы иметь возможность манипулировать через CSS количеством блоков в ряду, надо сделать все 20 блоков одинаковыми детьми внутри 1 родителя:

<ul>
<li>  img   </li>
<li>  img   </li>
...
</ul>


Картинки я обернул в li, так как в будущем это может пригодиться. Например, под картинкой потребуется подпись, или картинки будут иметь какую-то другую обвеску. Ещё потенциальная проблема: ошибка при ресайзе перед заливкой картинки на сервер - картинка вместо 100х200 px окажется 100х199 px, из-за этого вёрстка может поехать. Поэтому картинки надо обернуть в блоки, у которых чётко будет задан размер.

Через CSS блокам li задаём самое главное свойство display:inline-block;

ul {text-align:center; list-style:none; padding:0; margin:0;}
li {width:20%; display:inline-block; margin:0 0 1em; padding:0;}
img {width:90%; vertical-align:top;}


А количество блоков в линии можно менять через ширину li.
Размер картинок предполагается плавающим (в зависимости от экрана - это логично). Так что надо подготовить картинки чуть большего размера, чем требуется.

Мне обычно хватает двух форматов картинок: для PC и для мобилы. Но я знаю психопатов, которые делают чуть ли не 10 вариантов размеров под все популярные разрешения экрана ) На практике это избыточная мера, проверить можно инструментом google pagespeed.
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
Flexbox умеет в многострочный контент при переполнении.
Ответ написан
HistoryART
@HistoryART
Надзиратель
Вот так:

click
Ответ написан
@Asokr
Зачем здесь линии?
<div class="works">
 <div class="works-item">
   img
  </div>
</div>


.works {
display: flex;
flex-wrap: wrap;
}
.works-item {
margin: 0 10px 20px;
width: calc(20% - 20px);
}
img {
max-width: 100%;
height: auto;
}
Ответ написан
hzzzzl
@hzzzzl
а че не так, флексами прекрасно, респонсив вообще делать наилегчайше одной строчкой
(55 блоков я добавил через JS чтобы не копипастить)



UPD
ааа я только сейчас дочитал вопрос, flex-wrap: wrap и заданная ширина элемента во флекс-сетке, и готово
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы