【vue】vuikit-grid和宽度组件的理解(重要)

 

我们把一个最外层的grid设置为自动适配，然后内部分成两份，

• 第一部分还是一个grid，宽度为总宽度的3/4，通过grid外包的div设置宽度

         它分为两个card，第一个宽度是当前grid宽度的1/3，第二个蓝色的card宽度为当前grid的2/3，通过包裹在外的div设置宽度

• 第二部分是一个card，占总宽度的1/4，还是通过包裹在外的div设置

    <vk-grid gutter="collapse" class="uk-child-width-expand uk-grid-match">



        <div class="uk-width-3-4">

            <vk-grid gutter="collapse" class="uk-grid-match">


                <div class="uk-width-1-3">

                    <vk-card>

                        <span class="uk-text-small uk-text-muted">

                            共有<span class="uk-text-bold">5</span>本书

                        </span>

                    </vk-card>



                </div>


                <div class="uk-width-2-3">

                    <vk-card type="primary">



                    Item



                    </vk-card>

                </div>



            </vk-grid>

        </div>



        <div class="uk-width-1-4">

            <vk-card>



                Item

            </vk-card>

        </div>

    </vk-grid>

 

知识拓展：

1.等分：

如果要把grid整体4等分，不用去设置内部，只需要给grid设置uk-child-width-1-4，所有的card都会变grid宽度的1/4

 

 

2.自动和扩张：

绝大多数时间网格和宽度组件是搭配使用的,前边一个card根据内通自适应宽度，后边一个card填充后边所有

<vk-grid>



        <div class="uk-width-auto">

            <vk-card>

                Item

            </vk-card>

        </div>

        <div class="uk-width-expand">

            <vk-card>

                Item

            </vk-card>

        </div>



</vk-grid>

3.uk-grid-match是为了grid内部高度平齐