Home > Net >  grid columns not using full space of rows, overflowing to next line
grid columns not using full space of rows, overflowing to next line

Time：11-11

I am making a layout of cards(images) and want them to be the same size.

I want 4 columns in each row, 1 card per column. Then my next row will have 4 more, so on and so forth.

Instead of my cards taking up the 4 columns of each row, they're only taking up 3, then the 4th card overflows.

My html for this particular page is

<!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/[email protected]/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 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 class="row">
            <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 class="row">
            <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">
            <!-- placeholder -->
            </div>
        </div>

    </div>

</body>

</html>

my css (sloppy)

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;
    
  }
  
[![layout][1]][1]


  [1]: https://i.stack.imgur.com/bXidE.jpg

CodePudding user response：

You are applying margin: .5em; to .card which is also the .col-md-3 throwing off the spacing of the grid. If you need that margin 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>

CodePudding user response：

I added col-12 to your HTML and gave it a flex display on CSS. From here, I suggest making your parent container either larger or reducing some of your margins.

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.stack.imgur.com/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/[email protected]/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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I added the following CSS to fix your margins, you can do it however.

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

Click full-page

Page link：https//www.codepudding.com/net/186256.html

Prev:HTML force site colors
Next:separate media queries for every class?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding