我們把一個最外層的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內部高度平齊