Как спозиционировать первый элемент списка?

Question

[Никита Решетняк]

Доброго времени суток, подскажите пожалуйста, имею список из 7 квадратных элементов располагаются по три в строку. Первый элемент должен быть в высоту как 2 ряда. Сама ситуация здесь https://bruckebuild.com/. Сейчас первый элемент колхозно вынесен за имеющиеся и не горит желанием слушаться низких разрешений, по этому просто удаляется. Раньше это было сделано более красиво, без ущерба при разных разрешениях, но блок стилей я по неосторожности удалил. Кому не сложно прошу помочь.

Прошу сильно не ругаться я не силен в верстке

Comments

[Никита Решетняк]

Xdevelx, Нет не смотрел попробую, изменения около полугода назад вносились.... Хранит ли он столько...?

[Никита Решетняк]

Xdevelx, Спасибо, посмотрю

Answer 1

[Андрей]

Примерно вот так

<nav class="categories categories_navigation">
	<ul class="categories categories_navigation_ul">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</nav>

.categories_navigation {
    position: relative;
    margin-top: -80px;
}
.categories_navigation_ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -5px;
    padding: 0;
    list-style: none;
    padding-left: 25%;
}
.categories_navigation_ul li:first-child {
    height: 100%;
    height: 100%;
    width: 24%;
    position: absolute;
    left: 0;
}

https://developer.mozilla.org/ru/docs/Web/CSS/:fir...

Comments

[Никита Решетняк]

Круто! До компа доберусь попробую
Спасибо большое!

[Никита Решетняк]

А при понижении разрешения не пострадает?

[Андрей]

Никита Решетняк, на мобильных придется немного подверстать

[Никита Решетняк]

Андрей, В общем я дебил, там была закомментирована конструкция под это дело, я сначала сделал, потом заметил что оно там было.

В итоге работает родная конструкция

.categories_navigation_ul li:nth-child(1) {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	padding-right: 10px;
	padding-left: 0;
	width: 25%;
}

.categories_navigation_ul li:nth-child(1) .categories_navigation_link {
	width: 100%;
}