Как рациональнее всего реализовать такую секцию?

Question

[Crushing]

prntscr.com/h935rl - Сама секция.

Я пробовал так:

<div class="popularPlaces_Bigblocks">
					<div class="threeimageblock">
						<div class="abosouluteImageName">
							<img src="img/thesaloniki.png" alt="thesaloniki">
						</div>
						<div class="abosouluteImageName">
							<img src="img/halkidki.png" alt="halkidki">
						</div>
					</div>
					<div class="threeimageblock">
						<div class="abosouluteImageName">
							<img src="img/crete.jpg" alt="crete">
						</div>
					</div>
					<div class="threeimageblock">
						<div class="abosouluteImageName">
							<img src="img/atnes.png" alt="atnes">
						</div>
						<div class="abosouluteImageName">
							<img src="img/mykonas.png" alt="mykonas">
						</div>
					</div>
				</div>
				<div class="popularPlaces_Bigblocks">
					<div class="threeimageblock">
						<div class="abosouluteImageName">
							<img src="" alt="">
						</div>
					</div>
					<div class="threeimageblock">
						<div class="abosouluteImageName">
							<img src="" alt="">
						</div>
					</div>
					<div class="threeimageblock">
						<div class="abosouluteImageName">
							<img src="" alt="">
						</div>
					</div>
				</div>

Т.е. Я создал такую структуру: Поделил на два блока больших верхний слой картинок и нижний, далее в первом слое три дива для образования трех колонок, во втором слое я создал два дива для создания двух колонок. После чего я попытался получить доступ к первым трем колонкам таким образом: Указал большой див, первого слоя, т.е. popularPlaces_Bigblocks и добавил псевдоэлемент firs-child, далее обратился к трем дивам(колонкам), но браузер почему-то этого не видит таким образом и я не могу задать нужную ширину колонкам. А задавать стили через HTML это плохая практика, + с адаптивом потом проблемы будут.

Что посоветуете?

Comments

[Алекс Глебов]

flexboxgrid.com
так же

[Владимир Кашутин]

Высота у блоков с картинками фиксированная?

[Crushing]

Владимир Кашутин, Я им вообще высоту не задавал, тут вообще не в этом проблема)

Answer 1

[Сергей Мелодин]

Если совместимость не заботит, то изучай css-grid. Там такие вещи реализуются достаточно просто и получается весьма адаптивно. Или flexbox, примерно та же история.

Comments

[Crushing]

А что насчет кроссбраузерности? Насколько я знаю флексбоксы появились относительно недавно.

С какими браузерами будут проблемы у CSS-grid или FlexBox?

[Владимир Кашутин]

https://caniuse.com/#search=flexbox
https://caniuse.com/#search=grid

[Владимир Кашутин]

Crushing, флексбоксы появились очень давно, они пережили уже несколько инкарнаций)

[Сергей Мелодин]

Crushing, сайты типа MDN или caniuse позволяют получить информацию по поддержке каждого свойства. Но нужно учитывать, что данные изменяются пользователями и всё нужно проверять.

Лично я столкнулся с проблемой совместимости из-за того, что сделал веб-приложение, которое на Андроид у некоторых пользователей открывалось в стандартном браузере, а его юзер-агент мне удалось записать и увидеть там, например, Хром 18й версии. Примерную статистику можно глянуть тут: https://vk.com/doc-128502519_449523695

Если же делается сайт, например, визитка для себя, то можно особо не запариваться такими вопросами, поставить новые версии Мозилы, Хрома, Оперы, Edge и работать по принципу "у меня работает и ладно". Конечно, меня тут закидают какахами все, кто поддерживают IE6, но современность движется слишком быстро, чтобы заботиться о браузерах старше одного года.

[Crushing]

Сергей Мелодин, Да это как бы для портфолио будущего, хотелось бы хотя бы IE9+

[Сергей Мелодин]

Crushing, IE 11, вроде бы, поддерживает большую часть того же, что и Edge. Если хочется IE9, то, скорее всего, придётся забыть не только о гридах, но и CSS3 в целом ) Хотя я не знаю что он поддерживает точно.