Trifecta Card Arrangement

    <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 attempted to create a layout with three cards, similar to the wireframe image provided, but struggled with getting the spacing right.

Wireframe Image :

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

When using a 12-4 column grid layout, I found that my cards appeared wider than desired in comparison to the wireframe image.

My 12-4 design:

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

I am seeking advice on how to set up a grid layout for a three-card display, where each card occupies 25% of the screen width and is centered as shown in the wireframe.

The grid system I am required to use: https://www.ibm.com/standards/web/v18/design/grids/

javascripthtmljquerycss

Answer №1

There are a couple of key steps to follow:

  1. To adjust the Grid's width, you need to specify a width that is less than 100% of the viewport.
  2. Centering the grid on the screen can be achieved by using margin:auto.

This would be the CSS code for the grid container:

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

You can experiment with different values for width and column-gap to achieve your desired grid layout.

Answer №2

To achieve a centered alignment in your column div, you have a few options: Using the offset-1 class at the beginning of the column div and then applying the justify-center class from Bootstrap. Alternatively, simply use justify center for center alignment. You can also try adding blank divs at the start and end of your column divs with a grid structure like [1][3][3][3][1] and an offset grid of [1] for center alignment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Request was unsuccessful due to error code 400, which indicated a problem with the given MP4 file in the

I've been working on streaming an mp4 file from my computer. I can successfully upload and delete files, but when I click the link after uploading, all I see is {}. Additionally, I'm getting the following errors: GET http://localhost:8000/read/c9 ...

javascriptnode.jsreactjsmongodbexpress

Generate an image with PHP and then have it be sent as a response to an AJAX

I am utilizing this code snippet to dynamically generate an image using PHP. $image_width = 120; $image_height = 40; $characters_on_image = 6; $font = '/fonts/OpenSans.ttf'; //The characters that can be u ...

phpjqueryajaximage-processing

hiding elements in AngularJS when a certain ng-click event occurs

On a single page, I have a list of buttons displayed similar to a List View. My goal is to hide the specific button that was clicked upon. Here's my attempted solution: <input type="button" ng-click="add_item_to_list()" class="add-item-to-list" v ...

jqueryangularjs

Stylish CSS3: Skeleton Silhouette

Is there a way to create a grid with a dog bone shape using CSS and/or jQuery? The unique bone format consists of: The grid should have a similar appearance, but instead of being hexagonal it should be in the shape of a dog bone, with the content (ima ...

cssshapescss-shapes

Unexpected symbol in JSON parsing with JavaScript

let information; $.ajax({ url: link, type: 'POST', dataType: "json", success: function (data, textStatus) { information = data; alert(data.name); } }); I am attempting to retrieve JSON-encoded data from a spe ...

javascriptjson

Issue with Bootstrap 5 Dropdown not toggling back

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Admin Panel</title> <link rel="stylesheet" href=&q ...

javascriptdrop-down-menubootstrap-5

What is the definition of "top of the page" within a PHP document?

One source claimed that ob_start() should be placed at the top of the page, while another insisted that session_start() should take precedence. I also came across a guide stating that header() belongs at the beginning of the page. Additionally, I read th ...

phphtml

Is it possible to pass a JSON file as a JavaScript object in Express using Node.js?

When attempting to import a JSON file into my code using the line below, I am encountering an issue where the jsonConfig variable is being populated with a JavaScript object instead of the expected config file. This allows me to directly access jsonConfi ...

javascriptnode.jsexpress

Creating a new tab within a window that is already open

I have an interesting challenge - I need to open a new tab in a window that was previously opened using window.open(). So, if the window is already open, I want to open a tab in that same window. I have attempted to reference the existing window to open a ...

javascriptjqueryhtml

Execute a function in Jquery Mobile after transitioning to a new page

Upon successful login, my goal is to change the page and then load a map using two separate functions. The first function handles the login process and redirects to the home page, while the second function is responsible for showing the map. function doLo ...

javascriptjqueryjquery-mobile

Enabling and Disabling Input based on Conditions in Vue.js

Here is an example of an input field: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled" /> ...

javascripthtmlformsvue.jsinput

Using React hooks to implement drag and drop functionality

As a backend engineer primarily, I've been struggling to implement a simple drag and drop feature for a slider I'm creating in React. Here's the behavior without using debounce: no-debounce And here's the behavior with debounce: with- ...

javascriptreactjsreact-hooks

Unable to locate the specified parameters and keyword arguments for the 'ratio' function in reverse

An exception was encountered while attempting to render: django.urls.exceptions.NoReverseMatch: Reverse for 'ratio' with arguments '('',)' not found. 1 pattern(s) tried: ['dashboards/ratio'] This is the views.py co ...

pythonjqueryjsondjangopandas

Retrieve data from dropdown menu to showcase table using Node.js

I'm currently diving into learning nodejs and mongodb. My backend setup includes expressjs and mongojs, while ejs is handling the frontend of my application. The main goal is to allow users to select a class from a dropdown menu and view a correspondi ...

javascriptnode.jsmongodb

Is the PHP Ajax parameter missing during the upload process?

I'm attempting to do a simple upload, but I seem to be struggling. It could be that I'm not understanding it properly, or perhaps it's just too late at night for me to figure it out. After doing some research, I came across this example on ...

javascriptphphtmlajax

A guide on making interactive circular SVG image displays

I have a collection of svg files that fit together like pieces of a puzzle to form a circle. What would be the most effective way to arrange them? I attempted placing the segments within a ul with each on top of one another. Since the segment svgs are alre ...

htmlcsssvgsass

Unable to locate the CSS for the selected dropdown button in Bootstrap

Seeking help to locate the CSS code responsible for the blue border on a select dropdown button in Bootstrap. It seems simple, but I'm unable to find it. If anyone knows where this specific class is located in the CSS file, please share your insights ...

csstwitter-bootstrapbootstrap-selectbootstrap-selectpicker

Accessing a span element using an eval function

I have a function that accesses an input element and updates its value using the following line of code: eval('document.forms[0].telephone').value = $telephone[$i]; Now, I need to transfer this value to a span, but I'm having trouble refer ...

javascript

What could be causing my getAsFile() method to return null?

Below is the code I have been working on: document.getElementById("Image_Panel").addEventListener('paste', (event) => { console.log("Initiating image paste - Step 1"); const clipboardData = event.clipboardData; // Checking ...

javascripthtmlcssimage

Modify the data being sent to the AJAX call within the complete function

My task involves modifying the data sent to an ajax call within the complete function. For example, I initialize var total = 1; after the ajax call has begun execution. function test(total) { total = total; alert("total : " + total); } $('#c ...

javascriptajaxdatatable