<template>
<div>
<n-divider>Self 响应式</n-divider>
<n-grid cols="2 400:4 600:6" responsive="self">
<n-grid-item>
<div class="light-green">
1 似乎自适应不好用，
</div>
</n-grid-item>
<n-grid-item>
<div class="green">
2
</div>
</n-grid-item>
<n-grid-item>
<div class="light-green">
3
</div>
</n-grid-item>
<n-grid-item>
<div class="green">
4
</div>
</n-grid-item>
<n-grid-item>
<div class="light-green">
5
</div>
</n-grid-item>
<n-grid-item>
<div class="green">
6
</div>
</n-grid-item>
</n-grid>
<NGrid cols="2 s:3 m:4 l:5 xl:6 2xl:6" responsive="screen">
<NGridItem>
<div class="green">
cols="2 s:3 m:4 l:5 xl:6 2xl:6" 默认2列 s宽度的时候是3列 m宽度的时候是4列 l的时候是5列 xl的时候是6列 2xl是6列 不过需要 responsive=screen
sss
</div>
</NGridItem>
<NGridItem>
<div class="light-blue" style="flex-direction:column">
<div>
2 还是 responsive=screen好用
</div>
<div>
aa
</div>
</div>
</NGridItem>
<NGridItem>
<div class="green">
3
</div>
</NGridItem>
<NGridItem>
<div class="light-blue">
4
</div>
</NGridItem>
<NGridItem>
<div class="green">
5
</div>
</NGridItem>
<NGridItem>
<div class="light-blue">
6
</div>
</NGridItem>
<NGridItem>
<div class="green">
7
</div>
</NGridItem>
<NGridItem>
<div class="light-blue">
8
</div>
</NGridItem>
</NGrid>
<n-divider>Self 响应式</n-divider>
<n-grid cols="4" item-responsive>
<n-grid-item span="0 400:1 600:2 800:3">
<div class="light-green">
0～400px：不显示<br>
400～600px：占据空间 1<br>
600～800px：占据空间 2<br>
800px 以上：占据空间 3
</div>
</n-grid-item>
<n-grid-item>
<div class="green">
2
</div>
</n-grid-item>
</n-grid>
</div>
</template>
<script setup lang="ts">
import {NGrid,NGridItem} from 'naive-ui';
</script>
<style scoped>
.light-green {
height: 108px;
background-color: rgba(0, 128, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
}文章来源：https://www.toymoban.com/news/detail-413987.html
.light-blue{
width: 100%;
height: 120px;
background: #e923e9;
display: flex;
align-items: center;
justify-content: center;
}
.green {
height: 108px;
background-color: rgba(0, 128, 0, 0.24);
display: flex;
align-items: center;
justify-content: center;
}
</style>文章来源地址https://www.toymoban.com/news/detail-413987.html
到了这里，关于naive-ui ngrid自适应布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
