Skip to content

Instantly share code, notes, and snippets.

@sukhikh18

sukhikh18/style.scss

Last active October 10, 2021 20:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sukhikh18/b1d541398634271df004904f9d5629b4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sukhikh18/b1d541398634271df004904f9d5629b4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sukhikh18 revised this gist Oct 10, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@

    &__list {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--col-gap-half));
    margin-right: calc(-1 * var(--col-gap-half));
    }
  2. sukhikh18 revised this gist Oct 10, 2021. 1 changed file with 12 additions and 12 deletions.
    24 changes: 12 additions & 12 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,19 @@
    ///*
    // CSS variables
    // */

    .section {
    --columns: 5;
    --col-gap: 13px; // * Half gap
    --columns: 3;
    --col-gap: 30px;
    --col-gap-half: calc(var(--col-gap) / 2);

    &__list {
    margin-left: calc(-1 * var(--col-gap));
    margin-right: calc(-1 * var(--col-gap));
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--col-gap-half));
    margin-right: calc(-1 * var(--col-gap-half));
    }

    &__item {
    margin-left: var(--col-gap);
    margin-right: var(--col-gap);
    width: calc((1% * (100 / var(--columns))) - (2 * var(--col-gap)));
    word-wrap: break-word;
    margin-left: var(--col-gap-half);
    margin-right: var(--col-gap-half);
    width: calc((1% * (100 / var(--columns))) - var(--col-gap));
    }
    }
    }
  3. sukhikh18 revised this gist Oct 10, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -14,6 +14,6 @@
    &__item {
    margin-left: var(--col-gap);
    margin-right: var(--col-gap);
    width: calc((1% * (100 / var(--col-gap))) - (2 * var(--col-gap)));
    width: calc((1% * (100 / var(--columns))) - (2 * var(--col-gap)));
    }
    }
  4. sukhikh18 revised this gist Oct 8, 2021. 1 changed file with 11 additions and 6 deletions.
    17 changes: 11 additions & 6 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,19 @@
    ///*
    // CSS variables
    // */

    .section {
    --grid-offset: 13px;
    --columns: 5;
    --col-gap: 13px; // * Half gap

    &__list {
    margin-left: calc(-1 * var(--grid-offset));
    margin-right: calc(-1 * var(--grid-offset));
    margin-left: calc(-1 * var(--col-gap));
    margin-right: calc(-1 * var(--col-gap));
    }

    &__item {
    margin-left: var(--grid-offset);
    margin-right: var(--grid-offset);
    width: calc(33.3332% - (2 * var(--grid-offset)));
    margin-left: var(--col-gap);
    margin-right: var(--col-gap);
    width: calc((1% * (100 / var(--col-gap))) - (2 * var(--col-gap)));
    }
    }
  5. sukhikh18 renamed this gist Oct 8, 2021. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions gistfile1.txt → style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@

    &__item {
    margin-left: var(--grid-offset);
    margin-right: var(--grid-offset);
    width: calc(33.3332% - (2 * var(--grid-offset)));
    margin-right: var(--grid-offset);
    width: calc(33.3332% - (2 * var(--grid-offset)));
    }
    }
  6. sukhikh18 created this gist Oct 4, 2021.
    14 changes: 14 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    .section {
    --grid-offset: 13px;

    &__list {
    margin-left: calc(-1 * var(--grid-offset));
    margin-right: calc(-1 * var(--grid-offset));
    }

    &__item {
    margin-left: var(--grid-offset);
    margin-right: var(--grid-offset);
    width: calc(33.3332% - (2 * var(--grid-offset)));
    }
    }