_grid.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. /// Grid system
  2. //
  3. // Generate semantic grid columns with these mixins.
  4. @mixin make-container() {
  5. width: 100%;
  6. padding-right: ($grid-gutter-width / 2);
  7. padding-left: ($grid-gutter-width / 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() {
  20. display: flex;
  21. flex-wrap: wrap;
  22. margin-right: ($grid-gutter-width / -2);
  23. margin-left: ($grid-gutter-width / -2);
  24. }
  25. @mixin make-col-ready() {
  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. min-height: 1px; // Prevent collapsing
  32. padding-right: ($grid-gutter-width / 2);
  33. padding-left: ($grid-gutter-width / 2);
  34. }
  35. @mixin make-col($size, $columns: $grid-columns) {
  36. flex: 0 0 percentage($size / $columns);
  37. // Add a `max-width` to ensure content within each column does not blow out
  38. // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  39. // do not appear to require this.
  40. max-width: percentage($size / $columns);
  41. }
  42. @mixin make-col-offset($size, $columns: $grid-columns) {
  43. $num: $size / $columns;
  44. margin-left: if($num == 0, 0, percentage($num));
  45. }