AntonBrock
@AntonBrock
screen light

Как можно (проще) сверстать такую таблицу?

Привет всем! Нашел вот такое на прасторах инета, стояло "без участия bootstrap" и т.п. фреймворков, первое что на мысли приходит обычная таблица. Но можно ли еще как-нибудь ? (дивами?) Просто не думаю что таблицами идеально также встанут картинки .
5c1aac98e0f46085294283.jpeg
  • Вопрос задан
  • 162 просмотра
Решения вопроса 3
@Narts
Если не хотите через таблицу, то верстайте через дивы с inline-block и с фикс в процентах шириной. Но лучше все-таки таблицей
Ответ написан
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Если так не хотите с помощью таблиц, то единственным полноценным (и улучшенным) вариантом для вас будет верстка с помощью CSS Grid:
https://css-tricks.com/snippets/css/complete-guide...

Не будет нужно ставить жесткие габариты, все будет резиновое, Grid умеет управлять одновременно как строками, так колонками... ну и т. д. Иными словами -- как таблицы, только гораздо лучше.

Пример + адаптивность:
https://medium.com/evodeck/responsive-data-tables-...

P. S. В табличной верстке вполне реально сделать так, чтобы картинки «идеально так же встали». Поддержка grid хоть и неплохая, но хуже, чем у того же Flexbox и тем более хуже, чем у исконных table. Поэтому пользуйтесь caniuse.com для определения ваших потребностей и возможностей.

В данном случае, на мой взгляд, либо table, либо grid. Flexbox тут не очень подходит, т. к. он не умеет управлять одновременно как строками, так и колонками (только чем-то одним: row или column).
Ответ написан
LenovoId
@LenovoId
svg, css,js
Я как обычно предлагаю делать flex и внутри уже вставлять span или подобные inline-block элементы , примерно так как в этой песочнице
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
26 апр. 2024, в 07:47
2000 руб./за проект
26 апр. 2024, в 06:46
1000 руб./в час
26 апр. 2024, в 05:31
1000 руб./за проект