Skip to content

Instantly share code, notes, and snippets.

@alex-boom

alex-boom/grid-area

Last active April 4, 2020 16:52
Show Gist options
  • Save alex-boom/308eb18ee3ac80f09b24f662a3201b8b to your computer and use it in GitHub Desktop.
Save alex-boom/308eb18ee3ac80f09b24f662a3201b8b to your computer and use it in GitHub Desktop.
Download ZIP
grid-area
Raw
grid-area
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>grid area</title>
<style>
.links-block {
column-gap: 0;
padding: 50px 0;
@include media('<phone') {
display: grid;
grid-template-rows: 1fr;
grid-template-areas:
"col-0"
"col-4"
"col-1"
"col-5"
"col-2"
"col-6"
"col-3"
;
}
/* задамем стили тут циклом, применимо только к Способ 1
$columns: 7;
@for $i from 0 through $columns {
.col-#{$i} {
grid-area: col-#{$i};
}
} */
}
</style>
<script>
(function ($)
{
$(function ()
{
addClassLoop();
});
// Способ 1
// const addClassLoop = () =>
// {
// $('.links-block .item-link').each(function (e)
// {
// $(this).addClass(`col-${ e }`);
// });
// }
// Способ 2
// лучше стили grid-area задать тут
const addClassLoop = () =>
{
$('.links-block .item-link').each(function (e)
{
$(this).addClass(`col-${ e }`).css('grid-area', `col-${ e }`);
});
}
})(jQuery);
</script>
</head>
<body>
<div class="links-block uk-column-1-2@s">
<div class="item-link" uk-scrollspy="cls: uk-animation-slide-left; repeat: true">
<h1><strong>PROline —</strong> парикмахерский инструмент для профессионалов</h1>
</div>
<div class="item-link" uk-scrollspy="cls: uk-animation-slide-left; repeat: true">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<h4>Расчески</h4>
<img class="uk-transition-scale-up uk-transition-opaque" src="build/img/Combs.jpg" alt="image description">
</div>
</div>
<div class="item-link" uk-scrollspy="cls: uk-animation-slide-left; repeat: true">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<h4>Аксессуары</h4>
<img class="uk-transition-scale-up uk-transition-opaque" src="build/img/Combs.jpg" alt="image description">
</div>
</div>
<div class="item-link" uk-scrollspy="cls: uk-animation-slide-left; repeat: true">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<h4>Одежда</h4>
<img class="uk-transition-scale-up uk-transition-opaque" src="build/img/Combs.jpg" alt="image description">
</div>
</div>
<div class="item-link" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<h4>Ножницы</h4>
<img class="uk-transition-scale-up uk-transition-opaque" src="build/img/Combs.jpg" alt="image description">
</div>
</div>
<div class="item-link" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<h4>Щетки</h4>
<img class="uk-transition-scale-up uk-transition-opaque" src="build/img/Combs.jpg" alt="image description">
</div>
</div>
<div class="item-link" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<h4>Электроприборы</h4>
<img class="uk-transition-scale-up uk-transition-opaque" src="build/img/Combs.jpg" alt="image description">
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment