dancemc15 dancemc15 - 6 months ago 7
HTML Question

How can I have my cards stack on top of one another?

I have cards with a header that displays an image and title and a container containing links. I would like to have the cards 'Mochi' and 'Codex' stacked on top of one another naturally (NOT literally on top of one another). So there would be two small cards in the same column that would equal the size of a bigger card in a different column.

How can I have the cards flow naturally on top of one another? I tried doing position: absolute, but it just messes up my cards. Also, I had an underline when I hovered over each link, but after building these cards, I do not have the underline when I hover over the link anymore.
Hope that makes sense. Here's my JFiddle: https://jsfiddle.net/j5L6m2ju/3/

Thanks

Here's the HTML:

<div class="card">
<div class="header1" class="grayscale">
<h1>Quad</h1>
</div>

<div class="container1">
<ul>
<li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
<li><a href="">sdfsdfsdfsdfsdf</a></li>
<li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
<li><a href="">vfdfgdfgdfgdfgd</a></li>
<li><a href="">dfgdfgdfgdfgdfg</a></li>
</ul>
</div>
</div>

<div class="card">
<div class="header2" class="grayscale">
<h1>Mochi</h1>
</div>

<div class="container2">
<ul>
<li><a href="">fsdfsdfsdfsdfsdfsd</a></li>
</ul>
</div>
</div>


<div class="card">
<div class="header3" class="grayscale">
<h1>Codex</h1>
</div>

<div class="container3">
<ul>
<li><a href="" target="blank">sdgfsdfsdfsdfsdfsdfsd</a></li>
<li><a href="" target="blank">vfdgdfgdfgdfgdfgdfgdfg</a></li>
</ul>
</div>
</div>


<div class="card">
<div class="header4" class="grayscale">
<h1>New York Family</h1>
</div>

<div class="container4">
<ul>
<li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
<li><a href="">fgdfgdfgdfgdfgdf</a></li>
<li><a href="">sfgsdfsdfsdfsdfsd</a></li>
</ul>
</div>
</div>


Here's the CSS:

div.card {
width: 240px;
/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border: 1px solid #f2f2f2;
text-align: center;
margin:10px;
border-radius: 15px;
filter: gray;
filter: grayscale(1);
-webkit-filter: grayscale(1);
display:inline-block;
}

div.card:hover {
filter: none;
-webkit-filter: grayscale(0);

}

div.header1 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/Quad.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}

div.header2 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/Mochi.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
position: relative;
}

div.header3 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/codex_card.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
position:relative;
}

div.header4 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/NYF.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
position:relative;
}


div.container1 {
font-size:12px;
padding: 5px;
}

div.container2 {
font-size:12px;
padding: 5px;
position:relative;
}
div.container3 {
font-size:12px;
padding: 5px;
position:relative;
}
div.container4 {
font-size:12px;
padding: 5px;
position:relative;
}

div.container1 .container2 .container3 .container4 li {
margin:5px;
margin-bottom: 10px;

}

div.container1 .container2 .container3 .container4 a {
text-decoration:none;
padding-bottom: 4px;
}

div.container1 .container2 .container3 .container4 li:hover {
-o-transition:.4s;
-ms-transition:.4s;
-moz-transition:.4s;
-webkit-transition:.4s;
transition:.4s;

}

Answer

The masonry effect is what you are trying to get to in a way like pinterest layout the best way to go would using column-count: and column-gap: property

.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}
<div class="masonry">
   <div class="item"> <ul>
        <li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
        <li><a href="">sdfsdfsdfsdfsdf</a></li>
        <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
          <li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
        <li><a href="">sdfsdfsdfsdfsdf</a></li>
        <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
      </ul></div>
   <div class="item"> <ul>
        <li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
        <li><a href="">sdfsdfsdfsdfsdf</a></li>
        <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
      </ul></div>

   <div class="item">
     
       <li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
        <li><a href="">sdfsdfsdfsdfsdf</a></li>
        <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
                <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
   </div>
      <div class="item"> <ul>
        <li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
        <li><a href="">sdfsdfsdfsdfsdf</a></li>
        <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
          <li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
        <li><a href="">sdfsdfsdfsdfsdf</a></li>
        <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
      </ul></div>
   <div class="item"> <ul>
        <li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
        <li><a href="">sdfsdfsdfsdfsdf</a></li>
        <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
      </ul></div>

   <div class="item">
     
       <li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
        <li><a href="">sdfsdfsdfsdfsdf</a></li>
        <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
                <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
   </div>
        <div class="item">
     
  
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
                <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
   </div>
      <div class="item">
     
  
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
                <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
   </div>
     <div class="item">
     
       <li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
        <li><a href="">sdfsdfsdfsdfsdf</a></li>
        <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <li><a href="">dfgdfgdfgdfgdfg</a></li>
                <li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
        <li><a href="">vfdfgdfgdfgdfgd</a></li>
        <l
</div>

Read this for more

Your questions fiddle modified using column count

I just added a wrapper with column-count:3 and added column-break:avoid; thats all

Column count gives how many columns to divide a div into and column-break is used to set weather the contents of the column should be broken into two if not fits under the given space

Comments