The grid columns are not utilizing the entire space of the rows and are extending beyond to the next line

I'm currently designing a card layout with images and aiming for uniformity in size.

The plan is to have 4 columns in each row, with one card per column. Each subsequent row will also contain 4 cards.

However, there seems to be an issue where the cards are not taking up the full 4 columns of each row, causing the fourth card to overflow.

Below is the HTML code snippet for this page:

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="C:\Users\ADMIN-SURV\Desktop\training_guide\styles.css">
    

    <style>

    </style>

</head>

<body>
    <nav style="display: grid; justify-content: center">
        <ul>
            <li><a href="../index.html" class="button">Home</a></li>
            
        
            <!-- More list items here -->
        
        </ul>
    </nav>

    <div class="container">

        <div class="row">
            <!-- Card elements -->
        </div>
        
        <div class="row">
            <!-- Additional Card elements -->
        </div>

        <div class="row">
            <!-- Placeholder elements -->
        </div>

    </div>

</body>

</html>

Snippet from my CSS file (still a work in progress):

/* CSS styles go here */
htmlcsstwitter-bootstrapbootstrap-5card

Answer №1

To enhance your HTML, I included the col-12 class and applied a flex display in CSS. To further improve the layout, I recommend adjusting the size of your parent container or refining the margin and padding settings.

body {
    height: 100%;
    width: 100%;
    display: grid;
    padding-bottom: 5%;    
}

.container{
    display: grid;
    background-color: lightgrey;
    background-size: cover;
    /* grid-row-gap: 2em; */
    /* padding:3em;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(4, 1fr);
     */
};

/* .row {
    display: grid;
    padding:3em;
    grid-auto-rows: 1fr;
    background-color: lightgray;
    background-size: cover; 
    width: fit-content;

} */

.myborder{
    border: lightgray 1px solid;
    padding: 2px;
}   

.label{
    font-weight: bolder;
}

img{
    width: auto;
    height:auto;
    border:none;
    position: relative;
    padding: 1em;
    transition:transform 0.25s ease;
}

/* img:hover{
    
} */

div {
    display: grid;
    grid-auto-flow: inherit;
}

#roundImage{
    border-radius: 20%;
}

li {
    display: inline;
    /* border-style: solid;
    border-width: thin;
    border-radius: 15px; */
    padding: 5px;
    margin:10px;
  }

nav {
    padding-top: 10%
}
/* change subtitle to h2 */

.subtitle{
    font-size:larger;
    text-align: center;
    font-weight: bolder;
    align-self: center;
    justify-content: center;
    text-decoration:underline
}

h2{
    display: grid;
    justify-content: center;
    font-size: xx-large;
    /* padding-bottom: 1em; */
}


h1{
    font-size: xxx-large;
    text-align: center;
    font-weight: bolder;
    display: grid;
    align-content: center;
    justify-content: center;
    /* padding-top: 5%;
    padding-bottom: 3%; */
}

#noAtts{
    box-shadow: none;
}

.rmImg{
    padding:2 em;
    border-radius: 15%;
}

#longImage{
    height:650px;
    width:auto;
    padding-left: 50%;
}

.appearanceImg{
    height:auto;
    width:400px;
    position: relative;
}


/* Trying to figure out hover overlay */

/* img {
    transition:transform 0.25s ease;
} */

img:hover {
    -webkit-transform:scale(1.1); /* or some other value */
    transform:scale(1.1);
}

.layout{
    grid-template-columns: 25%, 25%, 25%, 25%;
    grid-template-rows: auto;
}

.centerImage{
    justify-content: center;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
    margin: .5em;
    
  }
  
  .col-12 {
    display: flex;
  }

  .row {
     padding-right: calc(var(--bs-gutter-x) * 3);
  }
  
[![layout][1]][1]


  [1]: https://i.sstatic.net/bXidE.jpg
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda8b3adb3af">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="C:\Users\ADMIN-SURV\Desktop\training_guide\styles.css">
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->


    <style>

    </style>

</head>

<body>
    <nav style="display: grid; justify-content: center">
        <ul>
            <li><a href="../index.html" class="button">Home</a></li>
            <li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\software.html">Software</a></li>
            <li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\serverRoom.html">Server Room</a></li>
            <li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\equipment.html">Our Equipment</a></li>
            <li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\wires.html">Cables and Wiring</a></li>
            <!-- <li><a href="References">References</a></li> -->
        </ul>
    </nav>

    <div class="container">

        <div class="row">
          <div class="col-12">
            <div style="justify-content: center" class="col-md-3 card">
                <img style="height:250px; width: fit-content;" src="../Images/activityss.jpg" alt="Activity Doc" />
                <div style="justify-items: center;">Unusual Activity</div>
            </div>
            <div style="justify-content: center" class="col-md-3 card">
                <img style="height:250px; width: fit-content;" src="../Images/accscreenshot.jpg" alt="ACC Doc" />
                <div style="justify-items: center;">ACC Guide</div>
            </div>
            <div style="justify-content: center" class="col-md-3 card">
                <img style="height: 250px; width: fit-content;" src="../Images/appearancess.jpg" alt="Appearance Doc" />
                <div style="justify-items: center;">Appearance Search</div>
            </div>
            <div style="justify-content: center" class="col-md-3 card">
                <img style="height:250px; width: fit-content;" src="../Images/encoderss.jpg" alt="Encoder Doc" />
                <div style="justify-items: center;">Encoders</div>
            </div>
          </div>
        </div>;

        <div class="row">
          <div class="col-12">
            <div style="justify-content: center" class="col-md-3 card">
                <img style="height: 250px; width: fit-content;" src="../Images/facialss.jpg" alt="Facial Doc" />
                <div style="justify-items: center;">Facial Recognition</div>
            </div>
            <div style="justify-content: center" class="col-md-3 card">
                <img style="height:250px; width: fit-content;" src="../Images/focusss.jpg" alt="Focus Doc" />
                <div style="justify-items: center;">Focus of Attention</div>
            </div>
            <div style="justify-content: center" class="col-md-3 card">
                <img style="height:250px; width: fit-content;" src="../Images/motionss.jpg" alt="Motion Doc" />
                <div style="justify-items: center;">Unusual motion</div>
            </div>
            <div style="justify-content: center" class="col-md-3 card">
                <img style="height:250px; width: fit-content;" src="../Images/opsss.jpg" alt="Operations Doc" />
                <div style="justify-items: center;">MGC Operations</div>
            </div>
          </div>
        </div>;

        <div class="row">
          <div class="col-12">
            <div style="justify-content: center" class="col-md-3">
             <!-- placeholder -->
            </div>
            <div style="justify-content: center" class="col-md-3 card">
       
            </div>
            <div style="justify-content: center" class="col-md-3 card">
                
            </div>
            <div class="col-md-3 card">
            <!-- placeholder -->
            </div>
        </div>
      </div>
    </div>

</body>

</html>

To address the padding issue, I implemented the following CSS rule:

.row {
  padding-right: calc(var(--bs-gutter-x) * 3);
}

Click full-page

Answer №2

Applying margin: .5em; to .card along with .col-md-3 is causing the grid spacing to be thrown off. If you require that margin, it is recommended to nest the .cards inside the .col-*s:

    <div class="container">
      <div class="row">
        <div style="justify-content: center" class="col-md-3">
          <div class="card">
            <img />
            ....
          </div>
        </div>
        <div style="justify-content: center" class="col-md-3">
          <div class="card">
            <img />
            ....
          </div>
        </div>
        ....
      </div>
    </div>

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

Article with content surpassing the boundary of its parent container

I'm struggling to contain text within the parent's div as it keeps overflowing. I attempted using element.style { text-overflow: ellipsis; overflow: hidden; } but unfortunately, it didn't work. Take a look here at my JSFiddle link. It ...

htmlcss

Ensuring that hover remains active despite mousedown in JavaScript, CSS, and HTML

It appears that in browser-javascript hover events are deactivated when the mouse button is pressed down, as demonstrated by the following example: (Please run the code snippet to witness what I am referring to.) * { user-select: none; } #click, #drag, ...

javascripthtmlcsshover

What is the process for aligning text with the margin on the left side

Inside a span block, there is an icon: <span><i></i>Text</span> The CSS for the icon is as follows: i { display: inline-block; width: 20px; height: 20px; } When the text inside the span is long, it wraps to the next lin ...

htmlcss

once a value is assigned to the variable "NaN," it remains constant and does not alter

What is the reason for not getting an assigned value in the line val3.value = parseInt(val1.value + val2.value);? Is it because the specified value "NaN" cannot be parsed, or is it out of range? var val1 = parseInt(document.getElementById("num1")); var ...

javascripthtml

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

javascripthtmlcss

Entwine words around an immovable partition

Is it possible to create an HTML element that remains fixed in place even as the content on the webpage changes, with everything else adjusting around it? I am looking to add a continuous line that spans across a dynamic webpage. No matter how much conten ...

javascriptjqueryhtmlcss

What is the best way to convert my Chatbot component into a <script> tag for seamless integration into any website using React.js?

I have successfully integrated a Chatbot component into my Next.js application. https://i.stack.imgur.com/BxgWV.png Now, I want to make this component available for anyone to use on their own website by simply adding a tag. My initial approach was to cre ...

javascripthtmlreactjswebpacknext.js

ways to run php script based on screen resolution or size

I have 2 php files that I need to execute based on screen size. include_once('large.php'); include_once('small.php'); The condition is to run large.php when the screen size is greater than 992px, and small.php when the screen size is ...

javascriptphpjqueryhtmlajax

Tips for maintaining the particles.js interaction while ensuring it stays under other elements

I have incorporated particle.js as a background element. By adjusting the z-index, I successfully positioned it in the background. While exploring solutions on the Github issues page, I came across a suggestion involving the z-index and this code snippet: ...

javascripthtmlcssparticle.js

Ways to Fix the React Hydration Issue in Next.js

I have been encountering an issue with the error message "Hydration failed because the initial UI does not match what was rendered on the server." I am unsure of what is causing this error and would appreciate any insights or suggestions from others who ma ...

javascripthtmlreactjsnext.js

Guide on presenting an image retrieved from a database with ajax

I am currently developing a straightforward mobile application that utilizes a database to store various types of content, including images. I have implemented ajax requests to retrieve this information and display it within the app. However, I am encounte ...

javascriptphphtmljsonajax

Sliding through HTML content

Unfortunately, I lack expertise in advanced HTML and CSS. After some investigation, I attempted to create a "content slider" similar to the one on the Redlight Traffic website (an anti-human trafficking organization). However, my efforts have been unsucces ...

javascripthtmlcssjscript

How can I replicate the functionality of the span element using Javascript?

Using Javascript, I am able to display a paragraph without the need for HTML. By adding it to an HTML id, I can manipulate individual words within the text. My goal is to make specific words cursive while keeping the entire paragraph in its original font s ...

javascripthtml

AngularJS table with resizable columns for seamless data browsing

Most examples of expandable tables using ng-repeat feature a separate content for the expanded row, like an independent table inside the detail row. I have implemented many expandable tables using these methods, similar to the following: <tr ng-repeat ...

htmlangularjsangularjs-ng-repeat

Looking for a prerequisite for running this script?

Seeking assistance from a skilled Javascript expert. I specialize in template development and utilize a specific script to display my footer link in all the free templates I create. If someone attempts to remove the footer link, their site will be redirec ...

javascripthtmlcssredirect

Learn how to dynamically alter the background color of a webpage by utilizing a JSON API for random color selection

My goal is to trigger a javascript function onload that will dynamically change the background color of the webpage using random colors fetched from a JSON file. ...

javascripthtmljson

Updating the total on the Infusionsoft order form can be achieved using either Jquery or custom code

Is there a way to automatically calculate and update the total amount on the order form based on user input in two quantity fields? The price should increase as the user adjusts the quantity. I've been searching for a solution, but haven't found ...

htmljqueryinfusionsoft

Configuring a background logo in WordPress using the Redux framework

I am attempting to integrate a "Logo upload" theme option using Redux framework, but I encountered an issue due to the logo being set up through a stylesheet in my HTML template. How can I configure this logo using an uploader? As a newcomer to WordPress a ...

phpcsswordpressframeworksredux-framework

Show and hide a div with the click of a button

As I embark on rebuilding a website from the ground up, I find myself pondering how to achieve a specific functionality: My goal is for another view to appear when one of two buttons is clicked. How can this be accomplished? I attempted the following app ...

jqueryhtmlcss

Tips for modifying only one property after receiving an object from an HTTP GET request

Within my Angular application, I have defined an object structure like this: export class Article { id: number; author: number; title: string; content: string; date: Moment; readingTime: number; draft: boolean; constructor(obj: Partial< ...

htmlcssangulartypescript