Можно ли сверстать блок с помощью гридов?

Question

[Сергей Бурдужа]

Добрый день.
Есть такой блок с табами

и на другом разрешении


Вот код из pug

.redactor__tabs#js-redactor-tabs
							.redactor__tabs-button.redactor__tabs-button--crop(data-tab="tab1")
								svg.redactor__crop-icon.redactor__icon
									use(xlink:href="#crop2")
							.redactor__tabs-content.redactor__tabs-content--crop#tab1
								.redactor__line
								.redactor__circle.redactor__circle--crop
							.redactor__tabs-line.redactor__tabs-line--1

							.redactor__tabs-button.redactor__tabs-button--fill(data-tab="tab2")
								svg.redactor__fill-icon.redactor__icon
									use(xlink:href="#fill")
							.redactor__tabs-content.redactor__tabs-content--fill#tab2
								.redactor__line
								.redactor__circle.redactor__circle--fill
							.redactor__tabs-line.redactor__tabs-line--2

							.redactor__tabs-button.redactor__tabs-button--contrast(data-tab="tab3")
								svg.redactor__contrast-icon.redactor__icon
									use(xlink:href="#contrast")
							.redactor__tabs-content.redactor__tabs-content--contrast#tab3
								.redactor__line
								.redactor__circle.redactor__circle--contrast
							.redactor__tabs-line.redactor__tabs-line--3

До мобильного разрешения сверстал с помощью гридов, чтобы использую свойство grid-template-areas на мобильном сделать табы.

В итоге, табы с иконками получились, а вот контент нет.


Вот кусок кода на мобильном.

@media screen and (max-width: $md) {
	grid-template-columns: repeat(3, auto);
	grid-template-rows: repeat(2, auto);
	grid-template-areas: "tab-crop tab-fill tab-contrast"
											"tab-content tab-content tab-content"
											;
	}

На мобильном с помощью js скрываю все блоки с контентом и показываю только первый.
Проблема в свойстве grid-template-areas, во-второй строчке.
Что мне тут прописать?
Если пишу только один раз tab-conten, то получается какая-то ерунда.

Как вы думаете, стоит ли с этим возиться, или просто делать два блока, один с табами, который показываем только на мобильном, и второй для планшета и десктопа.

Или дублирования контента это зло?

Спасибо.

Comments

[Lord_Dantes]

Почему все так сложно зачем??
Общий блок - wrapper - display: flex
Первый блок картинка - ничего
Второй блок с редакцией и инпутами - все что вам нужно

В мобилке просто wrapper - flex-direction: column

М?

[Сергей Бурдужа]

Slave, я не про блок вообщем, а про табы.
на первой картинке иконка и ползунок и линия снизу, а на мобилке все это превращается в табы.

[Lord_Dantes]

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

Answer 1

[KononovD]

Мне кажется, гриды в этом примере - просто лишняя головная боль)
я придумал как на флексах сделать с одним нюансом: инпуты будут позиционироваться абсолютно

берем делим вашу вот эту штуку на 2 части, слева картинка - справа все остальное
делаем 2 враппера, для ползунков и кнопок.
враппер ползунков - ul, ползунки в li, li тоже флекс, что бы в разные стороны развести инпут и таб-кнопку
врапперу для кнопок делаем маргин топ: авто

с десктопом, собсвенно все)

при адаптиве делаем flex-direction:column у всего блока, у инпутов и у кнопок
все инпуты скрываем, и у нас кнопки-табы выстраиваются в ряд, потом при нажатии на таб показывается нужный инпут с позишн абсолют

https://codepen.io/Kononov_D/pen/zbJxeQ?editors=0110
п.с. с стилями сами поиграйтесь, js так же сами напишите)

Comments

[Сергей Бурдужа]

Значит идея в том, что задать инпутам position: absoulute для мобильной версии?
Я постараюсь реализовать, потом отпишусь.

[KononovD]

Сергей Бурдужа, ну, я так придумал) уверен, мой подход довольно корявый, но это всяко лучше, чем дублировать код)

[Сергей Бурдужа]

все работает, почему я про absolute не подумал?

[Петр Васильев]

Сергей Бурдужа, потому что это плохая практика. Absolute строго для случаев, когда это реализуемо другими способами. Гриды простые как 5 копеек. Используйте их

[Сергей Бурдужа]

Петр Васильев, я с вами не соглашусь. Понимаете, у каждого своя практика, весь веб из этого строится. Сегодня одно, а завтра уже другое.

[Петр Васильев]

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

[KononovD]

Петр Васильев, "критикуешь - предлагай", слышали что-нибудь об этом?
предложите свою реализацию, а не просто

Гриды простые как 5 копеек. Используйте их

и мы все вместе будем знать как это делать правильно)

[Lord_Dantes]

Петр Васильев, к каким комментариям? Абсолют бывает вынужденной частью сайта судя по дизайну конечно же.
Если у тебя есть возможность использовать абсолют но вы не хотите критики, вы же не будете через js писать 100 строчек которые заменят абсолют? Тогда будет еще больше критики