Table, Flexbox, Grid

Заметка будет полезна тем, кто только учится делать сайты или хочет сделать сайт маленькой фирмы или друга лучше, а также начинающим front-end разработчикам.

Вроде табличка на сайте выглядит хорошо, но на телефоне появляются полосы прокрутки (уходит за экран) или картинка масштабируется до очень мелкого. И становится понятно, что использован не самый современный тег table.

Применимость тега table, взятая с сайта htmlbook.ru.

Понятно почему им продолжают пользоваться, но хочется быть современным и выбрать инструмент, который бы давал всегда тот вид, который от него ждёшь. Самым популярным уже не первый год является Flexbox.

Применимость CSS Flexible Box Layout Module взятая с сайта caniuse.com

Но уже несколько лет говорят, что его вытеснит Grid. Я считаю, что этого не наступило только потому, что всё ещё есть люди (а сейчас начало 2020), которые пользуются Windows XP и смартфонами старше пяти лет (смартфоны старше 5 лет, а не люди), а с ними всё ещё считаются. Хотя Firefox 52 там зелёненький, а значит можно брать на вооружение.

Применимость CSS Grid Layout взятая с сайта caniuse.com

Так чем же плох тег table

Уменьшим табличку:

вроде всё хорошо

Тут был применён код:

<table width="100%"> <tbody>

<tr>

<td width="25%" style="cursor: pointer;" onclick="openPLink('https://avtopartiya.com/Slesarnie_work')">

<p style="text-align: center;"><img src="//f.nodacdn.net/314421" /></p></td>

...

<tr valign="top">

<td style="width: 25%; cursor: pointer; " onclick="openPLink(https://avtopartiya.com/Slesarnie_work')">

<p style="text-align: center;">Слесарный ремонт <br /><b>от 390 руб</b></p>

</a></td>

...

Конечно для этого примера можно было загнать пачку ссылок <a> с картинка+текст в div типа <div style="width:100%; text-align:justify; text-justify: newspaper; text-align-last: justify;> и стало бы намного лучше, но таблицами делают и более сложные разметки и тогда всё всё равно поплывёт (будет, как эти два слова "всё" идущие подряд). Таким образом table подойдёт только для чего-то очень простого и не задуманного под адаптивность.

Плюсы и минусы Flexbox

Переделаем табличку во Flex:

Почти то, что хотелось

Видно, что разная длина текста играет злую шутку, за то адаптивность полная.

Код ощутимо удобнее, меньше и логичнее:

<div style="display: inline-flex;

flex-wrap: wrap;

justify-content: space-between;

padding: 10px;

align-items: baseline; ">

<div style="cursor: pointer; margin: 0 50px;" onclick="openPLink('https://avtopartiya.com/Slesarnie_work')">

<p style="text-align: center;"><img src="//f.nodacdn.net/314421" /></p>

<p style="text-align: center;">Слесарный ремонт <br /><b>от 390 руб</b></p>

</div>

...

Естественно стили удобнее прикручивать div-у контейнеру и div-у дочернему элементу.

Если сделать фиксированную ширину дочерних элементов, то это сделает разметку красивее, но определённо украдёт львиную долю "фич" самого flexbox layout. Так что работать с ним стоит как с одномерной моделью.

Плюсы и минусы Grid

Переделаем табличку в Grid:

Идеально!

Получилось то, что хотели.

Для этого примера кода совсем мало, но обычно его больше, чем с использованием Flex, но меньше, чем table.

<div style="display: grid;

grid-template-columns: repeat(auto-fill, 250px);

justify-content: space-between; ">

<div style="cursor: pointer;" onclick="openPLink('https://avtopartiya.com/Slesarnie_work')">

<p style="text-align: center;"><img src="//f.nodacdn.net/314421" /></p>

<p style="text-align: center;">Слесарный ремонт <br /><b>от 390 руб</b></p>

</div>

...

Учитывая ещё кучу возможностей для работы с фиксированной разметкой, то Grid - наилучший выбор. Рекомендую именно его, ведь всегда лучше с оптимизмом смотреть в будущее, чем пытаться угодить отстающим.