CODEWITHSUNDEEP
javascripthtmljquerycss
Suraj Prasad
Suraj Prasad

Reputation: 251

3 Card grid layout

    <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>

I was trying to set up a 3 card layout similar to below wireframe but not able to figure out how to get the spacing done properly.

Wireframe Image :

[![enter image description here][1]][1]

I have used a 12-4 column grid layout but my cards looked very wide compared to the wireframe image.

My 12-4 design:

[![enter image description here][2]][2]

I need suggestion on what grid layout I can set up so that I achieve a 3 card layout with each card having 25% width of the screen and is centered as shown in the wireframe

Grid system which I have to use: https://www.ibm.com/standards/web/v18/design/grids/

Upvotes: 0

Views: 536

Answers (2)

user13465934
user13465934

Reputation:

you can use offset-1 in the starting column div . and then use justify-centre class from bootstrap or
or you can just use justify center . or you can try blank divs at the start and end of ur column divs and use 1-2 grids or it so you will have grib structure like [1][3][3][3][1] and a offset grid of [1] for center align

Upvotes: 0

renatomt
renatomt

Reputation: 288

You have to do two things:

  1. To make the Grid more narrow you have to set a width for it that is less than 100% of the width of the viewport.
  2. There are some ways to make the grid centered on the screen, probably the easiest one is to use margin auto.

So the CSS for the grid container would be:

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

You can play with the width and the column-gap values to see if the grid aspect becomes what you want.

Upvotes: 2

Related Questions