Чтобы установить фиксированную высоту элементов во второй колонке грида, необходимо добавить стиль "grid-auto-rows: <значение высоты>;" для второй колонки.
В вашем коде, добавьте следующие стили:
```css
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(50px, max-content); /* <--- Добавленные стили */
}
```
Чтобы предотвратить изменение высоты закрытого аккордеона при открытии аккордеона в другой строке, можно использовать JavaScript, чтобы применить класс с фиксированной высотой только к активному аккордеону.
Сделайте следующие изменения в вашем скрипте:
```javascript
const accordions = document.querySelectorAll('.accordion');
accordions.forEach(accordion => {
accordion.addEventListener('click', function() {
// Удалить класс 'active' у всех аккордеонов
accordions.forEach(acc => acc.classList.remove('active'));
// Проверить, открыт ли текущий аккордеон
const isOpen = this.classList.contains('open');
// Добавить / удалить класс 'active' в зависимости от состояния аккордеона
if (!isOpen) {
this.classList.add('active');
} else {
this.classList.remove('active');
}
});
});
```
Затем в CSS добавьте следующие стили:
```css
.accordion {
/* Добавленные стили */
transition: height 0.3s ease;
}
.accordion:not(.active) {
/* Добавленные стили */
height: 50px; /* Здесь можно установить фиксированную высоту */
}
```
Теперь аккордеоны в закрытом состоянии во второй колонке будут иметь фиксированную высоту, а высота закрытого аккордеона не будет изменяться при открытии другого аккордеона.