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

Interact with one div to trigger changes in another (CSS)

I successfully influenced the style of one div when hovering over another div using the "+" selector, but I would prefer to find a different solution. My goal is for this interaction to work even if the .h div and the .t div are located in separate parent ...

htmlcsshoverselector

Issue with Flex display not being applied within Material UI Grid Item

I am attempting to position an element at the end of a Grid Item (horizontally). In order to achieve this, I am enclosing my component in the following div: Here is the complete code snippet: <Grid container spacing={8} alignItems={'stretch' ...

htmlcssreactjsflexboxmaterial-ui

Begin counting starting from 1 all the way up to 24, then feel free

I've developed a counter that increments from 0 to 24, and once it reaches 24: setInterval(function(){DayAndNight()}, 1000); var iState = 12; function DayAndNight() { //console.log('test'); switch(iState) ...

javascriptjqueryhtml

Finding the best way to transfer text between DIV elements?

I have a dilemma involving two DIV elements positioned absolutely on the sides of an HTML page, much like this EXAMPLE: <div class="left"> </div> <div class="right"> </div> These are styled using the following CSS: .left{ pos ...

javascripthtmlcss

What are the steps to transforming shorthand CSS into longhand?

Is there a tool available that can automatically convert shorthand CSS to longhand? I am in need of this functionality because I would like to utilize SmartSprites, which is not compatible with shorthand formatting. Additionally, if there is a tool that c ...

csscss-sprites

Is it possible to separate a portion of HTML into a template and reuse it in multiple locations within a webpage?

In my HTML, I have an issue with duplicate code. In Java, I typically use IntelliJ to mark the code and select "extract method" => "replace 2 occurrences". I am looking for a similar solution in HTML, but the current method seems messy: <ng-template #b ...

htmlangular

Obtain data attributes using JQuery's click event handler

I'm facing an issue with a div structure setup as follows: <div class='bar'> <div class='contents'> <div class='element' data-big='join'>JOIN ME</div> <div class=& ...

javascriptjqueryhtmltypescriptcustom-data-attribute

Why am I unable to attach this to JQuery?

$("input").keydown(function(event){ if(event.keyCode === 13){ return false; } }); I need to prevent the default action when the "enter" key is pressed in any of my text input fie ...

javascriptjqueryhtml

Tips for spinning HTML5 Canvas's background image and adjusting the zoom with a slider

As someone who is new to the world of coding, I have a few goals in mind: First and foremost, I want to create a canvas. I also aim to add a background image to the canvas. Importantly, this background image should be separate from any foreground images ...

jquerycsshtml5-canvas

Tips for dynamically resizing a div element as a user scrolls, allowing it to expand and contract based on

I was working on a project and everything seemed easy until I hit a roadblock. What I am trying to achieve is expanding a div to 100% when scrolling down to the bottom of the div, then shrink it back to 90% at the bottom and do the reverse when scrolling ...

javascriptcssreactjssassnext.js

I am having an issue in AngularJS/Bootstrap where my cancel button is triggering the submit event. Can

My Angular and Bootstrap form includes a submit button and a cancel button to hide the form. However, I noticed that when I click on the cancel button, it first calls the cancel event handler and then proceeds to call the submit handler. Is this the expe ...

angularjstwitter-bootstrap

Input field modified upon focus

I am currently using selectize js in my section to create a select box. My goal is to make the input editable after selecting an option when it is focused on. Check out the live demo: live demo HTML <label>Single selection <select id=" ...

javascripthtmljqueryselectize.js

Resetting the countdown timer is triggered when moving to a new page

In my current project, I am developing a basic battle game in which two players choose their characters and engage in combat. The battles are structured into turns, with each new turn initiating on a fresh page and featuring a timer that counts down from ...

javascripthtml

What steps can I take to stop my browser from displaying the "waiting for MyHostName" message while performing an ajax Post/Get operation?

Whenever I access a website using Chrome, a message appears in the status bar saying "Waiting for MyHost name" along with an Ajax Loader circle in the browser tab. Here is a javascript function that I am working with: function listen_backend_client_reques ...

javascripthtmlajaxbrowsergoogle-chrome

Error: Syntax mishap detected - Oh dear

Recently, I've been developing a small slideshow / public display for a client using the HTML5 Rock's Slideshow code. Everything was going smoothly until I encountered a DOM Exception 12 - an error related to CSS selectors. Strangely, I couldn&ap ...

javascripthtmldomsyntax-errordomexception

Clicking on the parent page prevents the hyperlink inside the iframe from working as expected

I am having an issue with a hyperlink inside an iframe. When I click on it in the parent page, it doesn't work. Here is how it is set up: iframe.html <h1>I'm inner page!</h1> <a id="shared" class="btn" href=&q ...

javascripthtmliframehyperlink

Manipulating certain attributes of a CSS class for a specific division element

I'm working with a div that has a CSS class applied to it. The class declares the height as x pixels, but I actually want my div to be y pixels high. Is there a way to override the height parameter of the CSS without making changes to the CSS file? ...

htmlcss

How can I retrieve an attribute from another model in Ember using the current handlebar in the HTML file?

I'm attempting to achieve the following: {{#if model.user.isAdmin}} <div> My name is {{model.user.name}} </div> {{/if}} within a handlebar that is being used in a controller unrelated to users: <script type="text/x-handlebars" data- ...

javascripthtmlember.jsmodel

Using a DIV to contain a FileUpload Control in an ASPX page

Scenario: I have an ASPX page (Page A) without a form element, which contains a DIV displaying another ASPX page (Page B) with a FileUpload Control inside a form element. Requirement: Submit the form to upload the file without refreshing or navigating awa ...

htmlasp.net

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

In a parent element, I have two child elements: <div id="registration"> <div id="left-panel"></div> <div id="right-panel"></div> </div> The styling is as follows: #registration{ @include l { flex-dire ...

htmlcss