Сьюзи Размер желоба

Я новичок в использовании Susy. Я только что скачал и установил в свое приложение. Я использую Susy 2.2

Я пытаюсь создать простую страницу/сетку с двумя столбцами одинаковой ширины (50%). Проблема, с которой я столкнулся, заключается в том, что каждый столбец имеет ширину всего 44,4444%, а первый имеет margin-right 11,111%

HTML:

<div class="container">
    <p>Welcome to my ToDo List, please sign in or register</p>

    <div class="log-in-section>
        <p>User name: <input type="text" name="username"></p>
        <p>Password: <input type="text" name="password"></p>
        <button>Log In</button>
    </div>

    <div class="register-section>
        <button>Register</button>
    </div>
</div>

CSS:

@import '_susy';

.container {
    @include container (12);
    width: 980PX;
    margin: 0 auto;     
    position: relative;
}

.log-in-section {
    @include span(1 of 2);
    border-right: 1px dashed red;

    @include breakpoint(medium) {
        @include span(1 of 1);
    }
}

.register-section {
    @include span(1 at 2 of 2);     

    @include breakpoint(medium) {
        @include span(1 of 1);
    }
}

Как я могу уменьшить размер желоба по умолчанию? И как я могу сделать так, чтобы border-right из log-in-section отображались в середине экрана?


css susy-compass susy-sass susy
person Oam Psy    schedule 24.04.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам следует взглянуть на настройки Susy (susydocs.oddbird.net/en/latest/settings/ ). Параметр gutters — это то, что вам нужно. Также стоит обратить внимание на gutter-position.

Кроме того, обычно (в зависимости от сетки и настроек сетки) вам нужно будет объявить последний столбец сетки с помощью миксина last:

.register-section {
    @include last;
    ... /* More styles */
person BlueM    schedule 24.04.2015