Проблема с Susy Grid, охватывающая 6 элементов

У меня есть некоторые проблемы, охватывающие мои 12 элементов в 2 рядах по 6.

У меня проблемы с разделом "художник". Я не уверен, должен ли я использовать миксин галереи для этого или просто использовать промежутки, как я для других моих разделов.

http://codepen.io/anon/pen/pNjqzw

HTML:

<html>
  <body>
    <header>
      <div class="container">
        <h1>SMEDC 2017</h1>
      </div>
    </header>

    <div class="container">
      <div class="rooms">
        <h1 class="title">Rooms</h1>
        <div class="room"></div>
        <div class="room"></div>
        <div class="room"></div>
      </div>

      <div class="packages">
        <h1 class="title">Packages</h1>
        <div class="package"></div>
        <div class="package"></div>
        <div class="package"></div>
        <div class="package"></div>
      </div>

      <div class="artists">
        <h1 class="title">Artists</h1>
        <div class="artist"></div>
        <div class="artist"></div>
        <div class="artist"></div>
        <div class="artist"></div>
        <div class="artist"></div>
        <div class="artist"></div>
        <div class="artist"></div>
        <div class="artist"></div>
        <div class="artist"></div>
        <div class="artist"></div>
        <div class="artist"></div>
        <div class="artist"></div>
      </div>
    </div>

    <footer>
      <div class="test">Powered by Smeazy</div>
    </footer>

  </body>
</html>

САСС:

@import "susy";
$susy: ( columns: 12,
         gutters: 1/4,
         global-box-sizing: border-box,
         debug:(image:show)
       );

// Colours
$color-primary: #38a1d6;
$color-secondary: #16f4d0;
$color-tertiary: #fcee21;
$color-grey: #a1acb5;
$color-grey-light: #dce8ef;
$color-grey-dark: #333;

$default-font: edc_font;

@font-face {
    font-family: 'edc_font';
    src: url('../fonts/lemonmilk-webfont.woff2') format('woff2'), url('f../onts/lemonmilk-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

%clearfix {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

header h1 {
    font-family: $default-font;
    text-align: center;
    font-size: 3.5rem;
    margin: 0;
}

.title {
    font-family: $default-font;
    text-align: center;
    font-size: 3rem;
    margin: 0;
}

.container {
    @include container();
}

header {
    background-color: $color-primary;
    height: auto;
}

.rooms {
    .room {
        @include span (4);
        height: 10rem;
        background: green;
        &:last-child {
            @include span (4 last);
        }
    }
}

.packages {
    .package {
        @include span (3);
        height: 10rem;
        background: red;
        &:last-child {
            @include span (3 last);
        }
    }
}

.artists {
    .artist {
        @include span (2);
        height: 10rem;
        background: pink;
        &:last-child {
            @include span (2 last);
        }
    }
}

footer {
    background-color: $color-grey;
    height: auto;
    font-family: $default-font;
    text-align: center;
    padding: gutter();
}

sass susy-sass susy
person 626    schedule 10.11.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В настоящее время проблема заключается в том, что :last-child выбирает последний элемент в контейнере (исполнитель № 12), а не последние элементы в строке (№ 6 и № 12). Последний дочерний элемент определяется деревом DOM, а не макетом.

Галерея миксин будет отлично работать здесь. Он также использует селекторы nth- на основе DOM, но применяет их более непосредственно. Поскольку у вас в контейнере есть заголовок h1 вместе со всеми вашими исполнителями, вам нужно будет включить опцию nth-of-type:

.artist {
    // each item spans 2 columns
    // items are targeted by sibling-position (nth) and type (div)
    @include gallery (2, of-type);
    height:10rem;
    background:pink;
}
person Miriam Suzanne    schedule 10.11.2016
comment
Большое спасибо, что объяснили это! - person 626; 11.11.2016