Как сверстать fluid grid?

324

27 июля 2018, 02:10

Есть вот такая индусская верстка. Её необходимо сверстать как на скриншоте

<center> 
  <a href="http://magadanmedia.ru/news/hashtag/767/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcitypeople.jpg" style="position: relative;height: 100%;max-height: 100px;margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Люди</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/743/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcityfood.jpg" style="position: relative; margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Еда</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/777/" target="_blank" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcityplace.jpg" style="position: relative; margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Места</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/778/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcitytrack.jpg" style="position: relative;height: 100%;max-height: 100px;margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Тропы</span></a><br> 
  <p> 
    <a href="https://t.me/MagadanMediaChat" target="_blank"><img title="Город в Телеграм" src="/files2/upimg/magadanmedia/mmcitytg.jpg" alt="" width="800" style="width: 100%;" height=""></a> 
  </p> 
</center>

Как этого можно добиться? Еще и адаптивно для мобилок и планшетов)

P.S Без использования гридов) и желательно без классов, если это возможно)

Answer 1

Можно использовать многоколончатый текст. Для этого <center> задай style="display:inline-block; column-width: 323px; column-gap: 10px; column-count: 2;"

Смотреть в режиме "На всю страницу".

<center style="display:inline-block; column-width: 323px; 
    column-gap: 10px; 
    column-count: 2;"> 
  <a href="http://magadanmedia.ru/news/hashtag/767/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcitypeople.jpg" style="position: relative;height: 100%;max-height: 100px;margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Люди</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/743/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcityfood.jpg" style="position: relative; margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Еда</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/777/" target="_blank" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcityplace.jpg" style="position: relative; margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Места</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/778/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcitytrack.jpg" style="position: relative;height: 100%;max-height: 100px;margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Тропы</span></a><br> 
  <p> 
    <a href="https://t.me/MagadanMediaChat" target="_blank"><img title="Город в Телеграм" src="/files2/upimg/magadanmedia/mmcitytg.jpg" alt="" width="800" style="width: 100%;" height=""></a> 
  </p> 
</center>

Уменьшение между колоночного расстояния.

<center style="display:inline-block; column-width: 323px; 
    column-gap: 1px; 
    column-count: 2;"> 
  <a href="http://magadanmedia.ru/news/hashtag/767/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcitypeople.jpg" style="position: relative;height: 100%;max-height: 100px;margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Люди</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/743/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcityfood.jpg" style="position: relative; margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Еда</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/777/" target="_blank" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcityplace.jpg" style="position: relative; margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Места</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/778/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcitytrack.jpg" style="position: relative;height: 100%;max-height: 100px;margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Тропы</span></a><br> 
  <p> 
    <a href="https://t.me/MagadanMediaChat" target="_blank"><img title="Город в Телеграм" src="/files2/upimg/magadanmedia/mmcitytg.jpg" alt="" width="800" style="width: 100%;" height=""></a> 
  </p> 
</center>

Answer 2

Можно для этого случая использовать flexbox, тогда придётся задать фиксированную высоту блоку и я изменил высоту для некоторых картинок убрав height: 100%; max-height: 100px, заменив на height: 88px. Также для этого, возможно, придётся поменять порядок картинок, так как они уже располагаются в столбик, а не в строчку.

center { 
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap; 
  align-content: center; 
  height: 290px; 
  text-align: left; 
} 
 
center > * { 
  flex-shrink: 0; 
}

<center> 
  <a href="http://magadanmedia.ru/news/hashtag/767/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcitypeople.jpg" style="position: relative; height: 88px;margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Люди</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/743/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcityfood.jpg" style="position: relative; margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Еда</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/777/" target="_blank" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcityplace.jpg" style="position: relative; margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Места</span></a> 
  <a href="http://magadanmedia.ru/news/hashtag/778/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcitytrack.jpg" style="position: relative; height: 88px;margin: 5px;" width="323"><span style="position: absolute;left: 1em;bottom: 0.1em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Тропы</span></a><br> 
  <p> 
    <a href="https://t.me/MagadanMediaChat" target="_blank"><img title="Город в Телеграм" src="/files2/upimg/magadanmedia/mmcitytg.jpg" alt="" width="800" style="width: 100%;" height=""></a> 
  </p> 
</center>