fix(space): inner display: grid element breaks item height, closes #546

CHANGELOG.en-US.md

@@ -8,6 +8,10 @@
 - `n-checkbox-group` add `min` and `max` prop.
 - `n-mention` add `empty` slot.
 
+### Fixes
+
+- Fix `n-space`'s inner `display: grid` element breaks item height, closes `https://github.com/TuSimple/naive-ui/issues/546`.
+
 ## 2.15.5 (2021-07-16)
 
 ### Feats

CHANGELOG.zh-CN.md

@@ -8,6 +8,10 @@
 - `n-checkbox-group` 新增 `min` 和 `max` 属性
 - `n-mention` 新增 `empty` slot
 
+### Fixes
+
+- 修复 `n-space` 中 `display: grid` 的元素显示不正确，关闭 `https://github.com/TuSimple/naive-ui/issues/546`
+
 ## 2.15.5 (2021-07-16)
 
 ### Feats

src/space/demos/zhCN/grid-debug.demo.md

@@ -0,0 +1,28 @@
+# Grid Debug
+
+```html
+<n-space vertical>
+  <div class="grid-list">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+  <div class="grid-list">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</n-space>
+```
+
+```css
+.grid-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 100px);
+  gap: 20px;
+}
+.item {
+  background-color: tomato;
+  height: 100px;
+}
+```

src/space/demos/zhCN/index.demo-entry.md

@@ -8,6 +8,7 @@
 basic
 vertical
 from-end
+grid-debug
 ```
 
 ## Props

src/space/src/Space.tsx

@@ -103,7 +103,7 @@ export default defineComponent({
         style={{
           display: inline ? 'inline-flex' : 'flex',
           flexDirection: vertical ? 'column' : 'row',
-          flexWrap: !wrap ? 'nowrap' : 'wrap',
+          flexWrap: !wrap || vertical ? 'nowrap' : 'wrap',
           justifyContent: 'flex-' + justify,
           marginTop: vertical ? '' : `-${semiVerticalMargin}`,
           marginBottom: vertical ? '' : `-${semiVerticalMargin}`,