html - Sass Susy ギャラリー: 2 つの列にまたがる要素

Question

susy のギャラリー mixin のいくつかの要素を 2 つの列にまたがるようにする必要があります。問題は、図に示すように、手動で実行しようとしても、その後に他の要素をプッシュしないことです。これはどのように行うことができますか。コードへのリンクhttps://github.com/iyedg/IGBlogTheme

Answer 1

これは、さまざまなサイズのアイテムを含むギャラリーに関する完璧なチュートリアルです。

要点は次のとおりです。これはgallery()mixin では実現できませんが、mixin では次のspan()ような方法で実現できます。

$susy: (
  columns: 12, 
  output: isolate
);

// Assuming output is set to isolate
.gallery__item {
  margin-bottom: gutter();
  @include span(4 of 12 split); 

  &:nth-child(4),
  &:nth-child(7), {
    width: span(8 of 12 split);
  }
}