Сетка 2xN в HTML/CSS ⇐ Jquery

[Anonymous]

[*] .wrapper { дисплей: гибкий; } .tilecontainer { отступ: 5 пикселей; размер шрифта: 25 пикселей; ширина: 100%; } @media screen и (максимальная ширина: 768 пикселей) { .tilecontainer { размер шрифта: 16 пикселей; } } .коробка { цвет фона: #0051a5; отступ справа: 1em; отступ-верх: 1em; граница-радиус: 1em; дисплей: сетка; строки-шаблона сетки: 1fr авто; столбцы-шаблона сетки: авто 1em; Grid-template-areas: «образец плюс» «экстратекст экстратекст»; } .плюс { область сетки: плюс; фон: линейный градиент (#0051a5 0 0), линейный градиент (#0051a5 0 0), #fff; фоновая позиция: центр; размер фона: 60% 2,5 пикселей, 2,5 пикселей 60%; фоновый повтор: без повтора; переход: легкость преобразования 0,3 с; } .знак { радиус границы: 50%; ширина: 1эм; высота: 1ем; поле справа: 1em; } .tilelabel { область сетки: образец; семейство шрифтов: «PT Sans Narrow», без засечек; размер шрифта: 1em; преобразование текста: верхний регистр; курсор: указатель; вес шрифта: 600; цвет: #fff; отступ слева: 1em; высота: 2ем; } .tileaccent { цвет: #FFC72C; } .скрытый-текст { область сетки: экстратекст; дисплей: нет; семейство шрифтов: «PT Sans Narrow», без засечек; размер шрифта: 0,75em; цвет фона: #F5F5F4; цвет: #000; маржа: 1em; отступ-верх: 0,5em; отступ слева: 1em; граница-радиус: 1em; } .expanded>.скрытый-текст { дисплей: блок; анимация: постепенное появление 1 с; } @keyframes постепенное появление { от { непрозрачность: 0; } к { непрозрачность: 1; } } @keyframes постепенное исчезновение { от { непрозрачность: 1; } к { непрозрачность: 0; } } .hidden-text ul li ul { дисплей: нет; } .hidden-text ul li.active ul { дисплей: блок; } ли .plus { преобразование: поворот (0); } li.active .plus { преобразование: поворот (45 градусов); } /* Заменяет курсор на указатель на элементы списка, у которых есть дочерний ul */ .hidden-text ul li:has(ul) .plus { плавать: вправо; } .hidden-text ul li:has(ul) { стиль списка: нет; /* Удалить пункт списка по умолчанию */ } .hidden-text ul li:has(ul) { курсор: указатель; } текст текст текст текст текст текст текст текст текст текст

• текст
• текст
• текст

const tileLabels = document.querySelectorAll('.box .tilelabel'); tileLabels.forEach((метка) => { label.addEventListener('click', function() { const родительский = this.closest('.box'); // Находим ближайшего родителя с классом box родительский.classList.toggle('расширенный'); const plus = родительский.querySelector('.plus'); plus.style.transform = родительский.classList.contains('расширенный')? 'поворот (45 градусов)': 'поворот (0)'; }); }); const toggleChild = (e) => { если (e.currentTarget == e.target) { const el = e.target; el.classList.toggle('активный'); } }; const level2 = document.querySelectorAll('.hidden-text ul li:has(ul)'); level2.forEach((li) => li.addEventListener('click', toggleChild));

Мне бы хотелось, чтобы максимальное количество полей, которые могут отображаться в каждой строке, составляло 2, чтобы создавалась сетка 2x2, если я хочу добавить еще 2 поля ссылок и так далее. Прямо сейчас, когда я попытался добавить еще 2 поля ссылок, это не создало эффекта 2x2, и я попытался использовать grid-template-columns в оболочке, чтобы обернуть поля ссылок так, чтобы они следовали за ними. шаблон сетки с использованием display: flex, но он работал не так, как ожидалось. Разве вам не нужно добавить его в класс wrapper, чтобы он определенным образом обертывал все поля ссылок (сетка 2x2)?

Мне нужен формат сетки 2xN, где N — количество столбцов.