_grid.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. /// Grid system
  2. //
  3. // Generate semantic grid columns with these mixins.
  4. @mixin make-container($gutter: $grid-gutter-width) {
  5. width: 100%;
  6. padding-right: $gutter / 2;
  7. padding-left: $gutter / 2;
  8. margin-right: auto;
  9. margin-left: auto;
  10. }
  11. // For each breakpoint, define the maximum width of the container in a media query
  12. @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  13. @each $breakpoint, $container-max-width in $max-widths {
  14. @include media-breakpoint-up($breakpoint, $breakpoints) {
  15. max-width: $container-max-width;
  16. }
  17. }
  18. }
  19. @mixin make-row($gutter: $grid-gutter-width) {
  20. display: flex;
  21. flex-wrap: wrap;
  22. margin-right: -$gutter / 2;
  23. margin-left: -$gutter / 2;
  24. }
  25. @mixin make-col-ready($gutter: $grid-gutter-width) {
  26. position: relative;
  27. // Prevent columns from becoming too narrow when at smaller grid tiers by
  28. // always setting `width: 100%;`. This works because we use `flex` values
  29. // later on to override this initial width.
  30. width: 100%;
  31. padding-right: $gutter / 2;
  32. padding-left: $gutter / 2;
  33. }
  34. @mixin make-col($size, $columns: $grid-columns) {
  35. flex: 0 0 percentage($size / $columns);
  36. // Add a `max-width` to ensure content within each column does not blow out
  37. // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  38. // do not appear to require this.
  39. max-width: percentage($size / $columns);
  40. }
  41. @mixin make-col-offset($size, $columns: $grid-columns) {
  42. $num: $size / $columns;
  43. margin-left: if($num == 0, 0, percentage($num));
  44. }