CODEWITHSUNDEEP
htmlcss
dancemc15
dancemc15

Reputation: 628

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;

}

Upvotes: 1

Views: 102

Answers (2)

codefreaK
codefreaK

Reputation: 3662

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

Upvotes: 1

Guney Cobanoglu
Guney Cobanoglu

Reputation: 733

Just replace the display property on div.card selector to display: block. You can find more information about display values on this article. Final CSS for div.card should look like this:

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: block;
}

Updated Fiddle: https://jsfiddle.net/j5L6m2ju/4/

Upvotes: 0

Related Questions