_grid.less 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /// Grid system
  2. //
  3. // Generate semantic grid columns with these mixins.
  4. #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. #make-row(@gutter: @grid-gutter-width) {
  12. display: flex;
  13. flex-wrap: wrap;
  14. margin-right: -(@gutter / 2);
  15. margin-left: -(@gutter / 2);
  16. }
  17. // For each breakpoint, define the maximum width of the container in a media query
  18. //@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  19. // @each $breakpoint, $container-max-width in $max-widths {
  20. // @include media-breakpoint-up($breakpoint, $breakpoints) {
  21. // max-width: $container-max-width;
  22. // }
  23. // }
  24. //}
  25. #make-container-max-widths(@max-widths: @container-max-widths, @breakpoints: @grid-breakpoints) {
  26. each(@max-widths, #(@container-max-width, @breakpoint) {
  27. #media-breakpoint-up(@breakpoint, {
  28. max-width: @container-max-width;
  29. }, @breakpoints);
  30. });
  31. #deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
  32. }
  33. #make-col-ready(@gutter: @grid-gutter-width) {
  34. position: relative;
  35. // Prevent columns from becoming too narrow when at smaller grid tiers by
  36. // always setting `width: 100%;`. This works because we use `flex` values
  37. // later on to override this initial width.
  38. width: 100%;
  39. min-height: 1px; // Prevent collapsing
  40. padding-right: (@gutter / 2);
  41. padding-left: (@gutter / 2);
  42. }
  43. #make-col(@size, @columns: @grid-columns) {
  44. flex: 0 0 percentage((@size / @columns));
  45. // Add a `max-width` to ensure content within each column does not blow out
  46. // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  47. // do not appear to require this.
  48. max-width: percentage((@size / @columns));
  49. }
  50. #make-col-auto() {
  51. flex: 0 0 auto;
  52. width: auto;
  53. max-width: 100%; // Reset earlier grid tiers
  54. }
  55. #make-col-offset(@size, @columns: @grid-columns) {
  56. @num: (@size / @columns);
  57. & when (@num = 0) {
  58. margin-left: 0;
  59. }
  60. & when not (@num = 0) {
  61. margin-left: percentage(@num);
  62. }
  63. }
  64. // Row columns
  65. //
  66. // Specify on a parent element(e.g., .row) to force immediate children into NN
  67. // numberof columns. Supports wrapping to new lines, but does not do a Masonry
  68. // style grid.
  69. #row-cols(@count) {
  70. > * {
  71. flex: 0 0 (100% / @count);
  72. max-width: (100% / @count);
  73. }
  74. }