Аккуратно: динамически увеличивая ширину столбца при сохранении структуры сетки

Question

Я использую библиотеку Bourbon's Neat для моей сетки.

У меня есть некоторый код, как это:

section { 
    @include outer-container; 
    aside { @include span-columns(3); } 
    article { @include span-columns(9); } 
} 

Я хочу, чтобы увеличить ширину aside тега по, скажем, 50px на парении. Однако это приведет к тому, что article будет нажата до следующей строки.

Есть ли способ масштабирования ширины одного столбца и пропорционального изменения размера другого столбца?

Я знаю, что это можно сделать с помощью javascript, но мне было интересно, есть ли способ сделать это с помощью аккуратной сетки.

Спасибо!

---

EDIT

Вот решение, которое работает для меня:

section { 
    @include outer-container; 
    aside { 
    @include span-columns(3); 

    &:hover { 
     @include span-columns(2); 

     & + article { 
     @include span-columns(11); 
     } 
    } 
    } 
    article { @include span-columns(9); } 
} 

Я использую селектор CSS родственный + выбрать элемент статьи, когда aside настоящее время парил над.

Answer 1

Для этого нет встроенных функций, но вы пробовали переопределить width на :hover? Изначатно добавьте x длина до width из колонки А и проведите ту же сумму away из колонки B. CSS calc() может помочь здесь. документы

Аккуратные дадут представление о точной функции span-columns и ее выход: http://thoughtbot.github.io/neat-docs/latest/#span-columns

Это, как говорится, это звучит как большой прецедент для Flexbox, если ваши потребности позволяют это.