3卡网格布局

Question

​

    <div class="ibm-columns" data-items=".ibm-card" style="padding-bottom: 96px;" data-widget="setsameheight">
                    <div class="uc1 ibm-col-12-4 card" style="display: none;">
                        <div class="ibm-card mobileFlex ibm-no-border">
                            <div class="ibm-card__image">
                                <img id="use-case-img-1" src="" alt="card_1" width="300" height="170" class="ibm-resize"></div>
                            <div class="ibm-card__content">
                                <p id="use-case-title-1" class="cardTitle"></p>
                                <p id="use-case-sub-title-1" class="cardSubtitle"></p>
                                <p class="ibm-ind-link">
                                    <a href="javascript:;" onclick="loadUseCasePage('0')" class="ibm-forward-link ibm-light">Explore</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="uc2 ibm-col-12-4 card" style="display: none;">
                        <div class="ibm-card mobileFlex ibm-no-border">
                            <div class="ibm-card__image">
                                <img id="use-case-img-2" src="" alt="card_2" width="300" height="170" class="ibm-resize"></div>
                            <div class="ibm-card__content">
                                <p id="use-case-title-2" class="cardTitle"></p>
                                <p id="use-case-sub-title-2" class="cardSubtitle"></p>
                                <p class="ibm-ind-link">
                                    <a href="javascript:;" onclick="loadUseCasePage('1')" class="ibm-forward-link ibm-light"><span class="ucExplore">Explore</span></a></p>
                            </div>
                        </div>
                    </div>
                    <div class="uc3 ibm-col-12-4 card" style="display: none;">
                        <div class="ibm-card mobileFlex ibm-no-border">
                            <div class="ibm-card__image">
                                <img id="use-case-img-3" src="" alt="card_3" width="300" height="170" class="ibm-resize"></div>
                            <div class="ibm-card__content">
                                <p id="use-case-title-3" class="cardTitle"></p>
                                <p id="use-case-sub-title-3" class="cardSubtitle"></p>
                                <p class="ibm-ind-link">
                                    <a href="javascript:;" onclick="loadUseCasePage('2')" class="ibm-forward-link ibm-light"><span class="ucExplore">Explore</span></a></p>
                            </div>
                        </div>
                    </div>

​

我试图设置一个3卡布局类似于下面的线框，但无法找到如何使间隔正确完成。

线框图像：

我使用了12-4列网格布局，但我的卡片看起来非常宽与线框图像相比。

我的12-4设计：

我需要建议我可以设置什么样的网格布局，这样我就可以实现3张卡的布局，每一张卡都有25%的屏幕宽度，并以线框中所示的方式居中。

我必须使用的网格系统：https://www.ibm.com/standards/web/v18/design/grids/

Answer 1

你必须做两件事：

要使网格变得更窄，必须为其设置一个小于viewport.

• There宽度100%的宽度，这是使网格以屏幕为中心的一些方法，可能最简单的方法是使用边距自动。

因此，网格容器的CSS应该是：

grid-template-columns: 1fr 1fr 1fr;
width: 80%;
margin: auto;
column-gap: 2vw;

您可以使用宽度和列间距值来查看网格方面是否变成了您想要的。

Answer 2

可以在起始列div中使用偏移量-1。然后使用引导或

或者你也可以用证明中心的方法。或者，您可以在ur列div的开头和结尾尝试空白div，并使用1-2网格或它，这样您就会有类似131的格栅结构和中心对齐的偏移网格1。