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

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

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

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

claudia-romano

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

claudia-romano

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

claudia-romano

@mixin gridAuto($min-width, $fallback: 3) {
  > * {
    float: left;
    width: calc(100%/#{$fallback} - #{$gap-horizontal});
  
    &:nth-child(#{$fallback}n + 1) {
      clear: both;
    }
  }

claudia-romano

$gap-horizontal: 10px;
$gap-vertical: $gap-horizontal;

@mixin grid {
  // fallback for IE
  &::before, &::after {
    content: '';
    display: table;
  }
  

claudia-romano

@mixin gridAuto($min-width) {
  @supports(grid-area: auto) {
    grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
  }
}

claudia-romano

$gap-horizontal: 10px;
$gap-vertical: $gap-horizontal;

@mixin grid {
  @supports(grid-area: auto) {
    display: grid;
    grid-column-gap: $gap-horizontal;
    grid-row-gap: $gap-vertical;
  }
}