Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .container
		.page-content
			.page-content-item.page-slider
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand ARCANA
						.page-card-inner-content-name.page-card-collection-content__name RIBE / ELBURG
						.page-card-inner-content-desc.page-card-collection-content__desc Коллекция ARCANA RIBE / ELBURG представлена ректифицированным матовым керамогранитом в формате 80x80 см. Более авангардные текстуры Ribe, как и более спокойные Elburg, вдохновлены популярным стилем терраццо для создания очаровательных в своей смелости интерьеров.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand REX CERAMICHE
						.page-card-inner-content-name.page-card-collection-content__name LES BIJOUX DE REX
						.page-card-inner-content-desc.page-card-collection-content__desc Коллекция керамогранита REX LES BIJOUX DE REX вдохновлена мраморами со столь редким и ценным рисунком, что ее можно назвать настоящим произведением искусства. Calacatta Altissimo Blanc, Onyx Blanche, Ombre De Caravage, Brèche Capraia, Marron Imperial, Jaspe Rouge, Sodalite Bleu, Les Quatre Saisons - излучают художественное очарование посредством стиля и большой выразительной силы, характерной для бренда Rex.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand WOW
						.page-card-inner-content-name.page-card-collection-content__name FLOW
						.page-card-inner-content-desc.page-card-collection-content__desc Утонченная коллекция WOW FLOW / ВАУ ФЛОУ представлена керамогранитом в форме ромбов 14x24 см в пяти актуальных оттенках — White, Taupe, Black, Old Rose, Blue, и трех вариантах "под дерево" — Light, Mid, Dark. Серия дополнена декоративным фоном в пяти основных цветах для создания бесконечного числа переливов. 
							| Широкая тональная вариативность плиток позволяет добиться более выразительного эффекта от облицовки. Основные элементы выпускаются в 6 оттенках в каждом цвете, цветные декоры — в 14 вариантах и "деревянные" ромбы — в 30 вариантах оттенка, которые случайным образом смешаны в коробке.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand ATLAS CONCORDE
						.page-card-inner-content-name.page-card-collection-content__name BOOST
						.page-card-inner-content-desc.page-card-collection-content__desc Коллекция Atlas Concorde Boost / Атлас Конкорд Буст - представлена керамогранитом и настенной плиткой, имитирующей цемент. Нейтральная палитра керамогранита, перекликаясь с оригинальным цветом стен, наполняет интерьер живой индивидуальностью. Теплые оттенки окисленного материала сочетаются с холодными, характерными для цемента штрихами неяркой по характеру поверхности.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand 41zero42
						.page-card-inner-content-name.page-card-collection-content__name SPECTRE
						.page-card-inner-content-desc.page-card-collection-content__desc EQUIPE ARTISAN / ЭКИПЕ АРТИСАН — новая эффектная серия керамической плитки для стен, предлагаемая в десяти оттенках — и ярких, и пастельных. Производится в компактных форматах 13.2x13.2 и 6.5x20.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg.png' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand WOW
						.page-card-inner-content-name.page-card-collection-content__name FLOW
						.page-card-inner-content-desc.page-card-collection-content__desc Утонченная коллекция WOW FLOW / ВАУ ФЛОУ представлена керамогранитом в форме ромбов 14x24 см в пяти актуальных оттенках — White, Taupe, Black, Old Rose, Blue, и трех вариантах "под дерево" — Light, Mid, Dark. Серия дополнена декоративным фоном в пяти основных цветах для создания бесконечного числа переливов. Широкая тональная вариативность плиток позволяет добиться более выразительного эффекта от облицовки. Основные элементы выпускаются в 6 оттенках в каждом цвете, цветные декоры — в 14 вариантах и "деревянные" ромбы — в 30 вариантах оттенка, которые случайным образом смешаны в коробке.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand ARCANA
						.page-card-inner-content-name.page-card-collection-content__name RIBE / ELBURG
						.page-card-inner-content-desc.page-card-collection-content__desc Коллекция ARCANA RIBE / ELBURG представлена ректифицированным матовым керамогранитом в формате 80x80 см. Более авангардные текстуры Ribe, как и более спокойные Elburg, вдохновлены популярным стилем терраццо для создания очаровательных в своей смелости интерьеров.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand REX CERAMICHE
						.page-card-inner-content-name.page-card-collection-content__name LES BIJOUX DE REX
						.page-card-inner-content-desc.page-card-collection-content__desc Коллекция керамогранита REX LES BIJOUX DE REX вдохновлена мраморами со столь редким и ценным рисунком, что ее можно назвать настоящим произведением искусства. Calacatta Altissimo Blanc, Onyx Blanche, Ombre De Caravage, Brèche Capraia, Marron Imperial, Jaspe Rouge, Sodalite Bleu, Les Quatre Saisons - излучают художественное очарование посредством стиля и большой выразительной силы, характерной для бренда Rex.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand WOW
						.page-card-inner-content-name.page-card-collection-content__name FLOW
						.page-card-inner-content-desc.page-card-collection-content__desc Утонченная коллекция WOW FLOW / ВАУ ФЛОУ представлена керамогранитом в форме ромбов 14x24 см в пяти актуальных оттенках — White, Taupe, Black, Old Rose, Blue, и трех вариантах "под дерево" — Light, Mid, Dark. Серия дополнена декоративным фоном в пяти основных цветах для создания бесконечного числа переливов. 
							| Широкая тональная вариативность плиток позволяет добиться более выразительного эффекта от облицовки. Основные элементы выпускаются в 6 оттенках в каждом цвете, цветные декоры — в 14 вариантах и "деревянные" ромбы — в 30 вариантах оттенка, которые случайным образом смешаны в коробке.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand ATLAS CONCORDE
						.page-card-inner-content-name.page-card-collection-content__name BOOST
						.page-card-inner-content-desc.page-card-collection-content__desc Коллекция Atlas Concorde Boost / Атлас Конкорд Буст - представлена керамогранитом и настенной плиткой, имитирующей цемент. Нейтральная палитра керамогранита, перекликаясь с оригинальным цветом стен, наполняет интерьер живой индивидуальностью. Теплые оттенки окисленного материала сочетаются с холодными, характерными для цемента штрихами неяркой по характеру поверхности.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand 41zero42
						.page-card-inner-content-name.page-card-collection-content__name SPECTRE
						.page-card-inner-content-desc.page-card-collection-content__desc EQUIPE ARTISAN / ЭКИПЕ АРТИСАН — новая эффектная серия керамической плитки для стен, предлагаемая в десяти оттенках — и ярких, и пастельных. Производится в компактных форматах 13.2x13.2 и 6.5x20.
			a(href="#").page-content-item.page-card(style='height:min-content;')
				.page-card-inner.page-card-collection
					figure
						.page-card-collection-badge
							.page-card-collection-badge__new НОВИНКА
							.page-card-collection-badge__have В ПУТИ НА СКЛАД
						img(src='https://keramikapro.ru/plitka.jpg.png' alt='img')
					.page-card-inner-content.page-card-collection-content
						.page-card-inner-content-brand.page-card-collection-content__brand WOW
						.page-card-inner-content-name.page-card-collection-content__name FLOW
						.page-card-inner-content-desc.page-card-collection-content__desc Утонченная коллекция WOW FLOW / ВАУ ФЛОУ представлена керамогранитом в форме ромбов 14x24 см в пяти актуальных оттенках — White, Taupe, Black, Old Rose, Blue, и трех вариантах "под дерево" — Light, Mid, Dark. Серия дополнена декоративным фоном в пяти основных цветах для создания бесконечного числа переливов. Широкая тональная вариативность плиток позволяет добиться более выразительного эффекта от облицовки. Основные элементы выпускаются в 6 оттенках в каждом цвете, цветные декоры — в 14 вариантах и "деревянные" ромбы — в 30 вариантах оттенка, которые случайным образом смешаны в коробке.
              
            
!

CSS

              
                .page {
  &-content {
	 background: #000;
    padding: 25px 0 60px 0;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
	 grid-template-rows: masonry;
    grid-gap: 5px;
    grid-auto-rows: 1px;
    @media ( max-width: 1440px ) {
      grid-template-columns: repeat(4, 1fr);
    }
    &-item {
      display: block;
      width: 100%;
    }
  }
  &-slider {
    grid-column: 1 / 3;
    height: 352px;
    background: gray;
  }
  &-card {
    position: relative;
	 height: 100%;
    z-index: 0;
	 display: block;
	 background: #fff;
    &-inner {
      height: 100%;
    }
    &-collection {
      figure {
        position: relative;
        img {
          width: 100%;
        }
      }
      &-badge {
          position: absolute;
          font-style: normal;
          font-weight: 600;
          font-size: 10px;
          line-height: 12px;
          text-align: center;
          letter-spacing: 0.05em;
          top: 16px;
          left: 16px;
          display: flex;
          &__new {
            background: greenyellow;
            color: linear-gradient(0deg, #333333, #333333);
            padding: 4px 10px;
            margin-right: 4px;
          }
          &__have {
            background: linear-gradient(0deg, #333333, #333333);
            color: #ffffff;
            padding: 4px 10px;
          }
        }
      &-content {
        padding: 12px 15px 20px;
        &__brand {
          font-style: normal;
          font-weight: normal;
          font-size: 12px;
          line-height: 16px;
          letter-spacing: 0.015em;
          color: #828282;
        }
        &__name {
          font-style: normal;
          font-weight: bold;
          font-size: 24px;
          line-height: 100%;
          border-bottom: 1px solid greenyellow;
          display: inline-block;
          margin: 4px 0 15px 0;
        }
        &__desc {
          font-style: normal;
          font-weight: normal;
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
  }    
}
              
            
!

JS

              
                function waterfallGrid() {
        let mainEl = document.querySelector(".page-content");
        let rowHeight = parseInt(
            getComputedStyle(mainEl).getPropertyValue("grid-auto-rows")
        );
        let rowGap = parseInt(
            getComputedStyle(mainEl).getPropertyValue("grid-row-gap")
        );
        let setSpan = el => {
            // Calculate the number of lines that the div needs to span
            el.style.gridRowEnd = `span ${Math.ceil(
                (el.clientHeight + rowGap) / (rowHeight + rowGap)
            )}`;
        };
        document.querySelectorAll(".page-content-item").forEach(setSpan);
        document.querySelectorAll(".page-card").forEach((item) => {
            item.style.height = 'min-content';
        });
        setTimeout(() => {
            document.querySelectorAll(".page-content-item").forEach((item) => {
                item.style.height = 'auto';
            });
        }, 1000);

    }
    waterfallGrid();
    window.addEventListener('resize', function (event) {
        waterfallGrid();
    });

              
            
!
999px

Console