fix(grid): fix responsive breakpoints and gutter wrapping

CSS used max-width (broken) instead of min-width (mobile-first),
had a duplicate sm query, and was missing xs. Row gutter used
index-based padding causing indent on wrapped columns; switch to
negative-margin approach with equal padding on all cols.

Author: wangdicoder

components/grid/demo/responsive.md

@@ -0,0 +1,39 @@
+<demo>
+
+### Responsive
+
+Columns respond to viewport width using `xs`, `sm`, `md`, `lg`, `xl`, `xxl` breakpoints. Resize the browser to see columns reflow.
+
+```jsx live
+() => {
+  const style = (bg) => ({
+    background: bg,
+    color: '#fff',
+    padding: '12px 0',
+    textAlign: 'center',
+    borderRadius: 4,
+    marginBottom: 8,
+  });
+
+  return (
+    <>
+      <Row gutter={[16, 16]}>
+        <Col xs={24} sm={12} md={8} lg={6}>
+          <div style={style('rgba(110, 65, 191, 0.9)')}>xs=24 sm=12 md=8 lg=6</div>
+        </Col>
+        <Col xs={24} sm={12} md={8} lg={6}>
+          <div style={style('rgba(110, 65, 191, 0.7)')}>xs=24 sm=12 md=8 lg=6</div>
+        </Col>
+        <Col xs={24} sm={12} md={8} lg={6}>
+          <div style={style('rgba(110, 65, 191, 0.9)')}>xs=24 sm=12 md=8 lg=6</div>
+        </Col>
+        <Col xs={24} sm={12} md={8} lg={6}>
+          <div style={style('rgba(110, 65, 191, 0.7)')}>xs=24 sm=12 md=8 lg=6</div>
+        </Col>
+      </Row>
+    </>
+  );
+}
+```
+
+</demo>

components/grid/index.md

@@ -3,6 +3,7 @@ import Gutter from './demo/gutter.md'
 import Offset from './demo/offset.md'
 import Order from './demo/order.md'
 import Alignment from './demo/alignment.md'
+import Responsive from './demo/responsive.md'
 
 # Grid
 
@@ -21,6 +22,7 @@ import { Row, Col } from 'tiny-ui';
 <Offset />
 <Order />
 <Alignment />
+<Responsive />
 
 ## API
 

components/grid/row.tsx

@@ -28,18 +28,24 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   };
 
   const normalisedGutter = getGutter();
+
+  const rowGutterStyle = gutter
+    ? {
+        marginLeft: gutterSide ? 0 : -normalisedGutter[0] / 2,
+        marginRight: gutterSide ? 0 : -normalisedGutter[0] / 2,
+        rowGap: normalisedGutter[1] || undefined,
+      }
+    : {};
+
   return (
-    <div {...otherProps} ref={ref} className={cls} style={style}>
-      {React.Children.map(children, (child, idx: number) => {
+    <div {...otherProps} ref={ref} className={cls} style={{ ...style, ...rowGutterStyle }}>
+      {React.Children.map(children, (child) => {
         const childElement = child as React.FunctionComponentElement<ColProps>;
         if (childElement.type.displayName === 'Col') {
           const gutterStyle = gutter
             ? {
-                paddingLeft: !gutterSide && idx === 0 ? 0 : normalisedGutter[0] / 2, // first child left padding
-                paddingRight:
-                  !gutterSide && idx === React.Children.count(children) - 1
-                    ? 0
-                    : normalisedGutter[0] / 2,
+                paddingLeft: normalisedGutter[0] / 2,
+                paddingRight: normalisedGutter[0] / 2,
               }
             : {};
           const childProps: Partial<ColProps> = {

components/grid/style/_index.scss

@@ -70,23 +70,21 @@
   box-sizing: border-box;
   display: block;
   @include grid();
+  @include grid('-xs');
 
-  @media screen and (max-width: $size-sm) {
+  @media screen and (min-width: $size-sm) {
     @include grid('-sm');
   }
-  @media screen and (max-width: $size-sm) {
-    @include grid('-sm');
-  }
-  @media screen and (max-width: $size-md) {
+  @media screen and (min-width: $size-md) {
     @include grid('-md');
   }
-  @media screen and (max-width: $size-lg) {
+  @media screen and (min-width: $size-lg) {
     @include grid('-lg');
   }
-  @media screen and (max-width: $size-xl) {
+  @media screen and (min-width: $size-xl) {
     @include grid('-xl');
   }
-  @media screen and (max-width: $size-xxl) {
+  @media screen and (min-width: $size-xxl) {
     @include grid('-xxl');
   }
 }