Merge branch 'main' into main-mc-width-utilities-split

scss/_utilities.scss

@@ -110,10 +110,13 @@ $utilities: map-merge(
     // Sizing utilities
     "width": (
       property: width,
+      responsive: true,
       class: w,
       values: (
         25: 25%,
+        33: 100% / 3,
         50: 50%,
+        66: 200% / 3,
         75: 75%,
         100: 100%,
         auto: auto

scss/mixins/_grid.scss

@@ -27,13 +27,11 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 auto;
+  flex: 0 0 percentage($size / $columns);
-  width: percentage($size / $columns);
 }
 
 @mixin make-col-auto() {
   flex: 0 0 auto;
-  width: auto;
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
@@ -48,8 +46,7 @@
 // style grid.
 @mixin row-cols($count) {
   > * {
-    flex: 0 0 auto;
+    flex: 0 0 (100% / $count);
-    width: 100% / $count;
   }
 }
 

site/content/docs/5.0/layout/columns.md

@@ -300,7 +300,7 @@ The classes can be used together with utilities to create responsive floated ima
 
 {{< example >}}
 <div class="clearfix">
-  {{< placeholder width="100%" height="210" class="col-md-6 float-md-right mb-3 ml-md-3" text="Responsive floated image" >}}
+  {{< placeholder width="100%" height="210" class="w-md-50 float-md-right mb-3 ml-md-3" text="Responsive floated image" >}}
 
   <p>
     Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris paddenstoel nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.