claudia-romano

:root {
  --grid-gap: 10px;
}

claudia-romano

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--grid-gap) * -1) 0 0 calc(var(--grid-gap) * -1);
}

claudia-romano

.col {
  padding: calc(var(--grid-gap)) 0 0 calc(var(--grid-gap));
  background-clip: content-box;
  flex-basis: 100%;
}

claudia-romano

$grid-columns: 12;

@for $i from 1 through $grid-columns {
  .col--#{$i} {
    flex-basis: round-width($i);
    max-width: round-width($i); 
  }
}

claudia-romano

@function round-width ($i) {
  $width : floor(100 * $i * 100/ $grid-columns) / 100;
  @return $width#{"%"};
}

claudia-romano

@media only screen and (min-width: 600px) {
  @for $i from 1 through $grid-columns {
    .col--md-#{$i} {
      flex-basis: round-width($i);
      max-width: round-width($i); 
    }
  }
}

claudia-romano

.grid {
  @include gridLayout(
    (7, 2), //item 1
    (5, 1), //item 2
    (5, 1), //item 3
    (12, 1) //item 4
  );
}

claudia-romano

@mixin gridLayout($cols...) {
  @supports(grid-area: auto) {
    grid-template-columns: repeat($grid-columns, 1fr);

    $i: 1;
    @each $col in $cols {
      > :nth-of-type(#{$i}) {
        grid-column-end: span nth($col,1);
        @if length($col) > 1 {
          grid-row-end: span nth($col,2);

claudia-romano

@mixin gridLayout($cols...) {
  $i: 1;
  @each $col in $cols {
    > :nth-of-type(#{$i}) {
      width: calc( #{round-width(nth($col,1))} - #{$gap-horizontal});
    }
    $i: $i + 1;
  }

  @supports(grid-area: auto) {

claudia-romano

.grid {
  @include gridAdvanced(
    (1, 8, 1, 3), //item 1
    (1, 8, 3, 5), //item 2
    (5, -1, 2, 4) //item 3
  );
}