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

$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

@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

@mixin gridAdvanced($cols...) {
  $i: 1;
  $span: 0;
  @each $col in $cols {
    > :nth-of-type(#{$i}) {
      @if nth($col,2) == -1 {
        $span: $grid-columns - nth($col,2) - nth($col,1);
      } @else {
        $span: nth($col,2) - nth($col,1);
      }

claudia-romano

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

claudia-romano

<ul class="flex-grid">
  <li class="col col--9">1</li>
  <li class="col col--3">2</li>
</ul>