Layout von Websiten mit Bootstrap und Foundation
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_grid.scss 1.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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-auto() {
  42. flex: 0 0 auto;
  43. width: auto;
  44. max-width: 100%; // Reset earlier grid tiers
  45. }
  46. @mixin make-col-offset($size, $columns: $grid-columns) {
  47. $num: $size / $columns;
  48. margin-left: if($num == 0, 0, percentage($num));
  49. }
  50. // Row columns
  51. //
  52. // Specify on a parent element(e.g., .row) to force immediate children into NN
  53. // numberof columns. Supports wrapping to new lines, but does not do a Masonry
  54. // style grid.
  55. @mixin row-cols($count) {
  56. & > * {
  57. flex: 0 0 100% / $count;
  58. max-width: 100% / $count;
  59. }
  60. }