Search code examples
htmlcsswebstaggeredgridlayout

Staggered Layout with inline-block, cant combine boxes vrtically

I want to place inline-block boxes vertically and horizontally combined, As in a staggered grid layout.

i just want to place these blocks in staggered grid layout. i have tried vertical align:top, display:table-cell, parent font-size:0, white-space:no-wrap,float:left etc. Didn't found any solution.

Problem with this whiteSpace

I want to achieve this

Am using this code.

.contentPanel
{
    position: inherit;
    display: table-cell;
    float: left;
    padding: 10px;
    margin: 5px;
    width: 24.2%;
    min-width: 320px;
    height: auto;
    background: #FFF;
    box-sizing: border-box;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    vertical-align: top;
}

.contentPanel > h4
{
    text-align: center;
    margin-top: 5px;
    text-decoration: underline;
    box-sizing: border-box;
    color: #333;
}

.formLayout
{
    background-color: purple;
    display: table;
    width: 95%;
    background: #FFF;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

.formLayout > input
{
    width: 100%;
    height: 40px;
    outline: none;
    display: block;
    margin-top: 12px;
    border: none;
    border-bottom: 1px solid #AAA;
}

.formLayout > input[type=button]
{
    border: none;
    background-color: #66AAFF;
    color: #FFF;
    height: 40px;
}
<div class="contentPanel">
        <h4>cdscdcsc</h4>
        <form id="newDiseaseForm" class="formLayout">
            <input type="text" name="name" placeholder="sfd"/>
            <input type="text" name="symptoms" placeholder="sf"/>
            <input type="text" name="precautions" placeholder="sfs"/>
            <input type="text" name="riskFactors" placeholder="Rissfsfk Factors"/>
            <input type="text" name="vaccines" placeholder="sfs"/>
            <input type="button" name="add" title="Add" value="sf"/>
        </form>
    </div>
    
    <div class="contentPanel">
        <h4>cdscdcsc</h4>
        <form id="newDateForm" class="formLayout">
            <input type="text" name="date" placeholder="df"/>
            <input type="button" name="add" title="Add" value="dfd"/>
        </form>
    </div>
    
    <div class="contentPanel">
        <h4>cdscdcsc</h4>
        <form id="newEntryForm" class="formLayout">
            <input type="text" name="disease" placeholder="fd"/>
            <input type="text" name="date" placeholder="fdf"/>
            <input type="text" name="deadList" placeholder="fdf"/>
            <input type="text" data-role="tagsinput" name="fdd" placeholder="fdf"/>
            <input type="button" name="add" title="Add" value="fdf"/>
        </form>
    </div>

Solution

  • You can try this responsive solution:

    * {margin: 0; padding: 0; box-sizing: border-box}

#container {
  position: relative;
  width: 1200px;
  max-width: 100%;
  margin: 10px auto;
  column-count: 3;
  column-gap: 10px;
}

#container > .contentPanel {
  position: relative;
  margin-bottom: 10px;
  page-break-inside: avoid;
  break-inside: avoid-column;
  padding: 10px;
  height: auto;
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.3);
  vertical-align: top;
}

#container > .contentPanel > h4 {
  text-align: center;
  margin-top: 5px;
  text-decoration: underline;
  color: #333;
}

#container > .contentPanel > .formLayout {
  background: purple;
  display: table;
  width: 95%;
  background: #fff;
  margin: 0 auto;
  overflow: hidden;
}

#container > .contentPanel > .formLayout > input {
  width: 100%;
  height: 40px;
  outline: none;
  display: block;
  margin-top: 12px;
  border: none;
  border-bottom: 1px solid #aaa;
}

#container > .contentPanel > .formLayout > input[type=button] {
  border: none;
  background: #66AAFF;
  color: #fff;
  height: 40px;
}

@media (max-width: 1200px) {
  #container {padding: 0 10px}
}

@media (max-width: 768px) {
  #container {column-count: 2}
}

@media (max-width: 480px) {
  #container {column-count: 1}
}
    <div id="container">
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDiseaseForm" class="formLayout">
      <input type="text" name="name" placeholder="sfd">
      <input type="text" name="symptoms" placeholder="sf">
      <input type="text" name="precautions" placeholder="sfs">
      <input type="text" name="riskFactors" placeholder="Rissfsfk Factors">
      <input type="text" name="vaccines" placeholder="sfs">
      <input type="button" name="add" title="Add" value="sf">
    </form>
  </div>

  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDateForm" class="formLayout">
      <input type="text" name="date" placeholder="df">
      <input type="button" name="add" title="Add" value="dfd">
    </form>
  </div>

  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newEntryForm" class="formLayout">
      <input type="text" name="disease" placeholder="fd">
      <input type="text" name="date" placeholder="fdf">
      <input type="text" name="deadList" placeholder="fdf">
      <input type="text" data-role="tagsinput" name="fdd" placeholder="fdf">
      <input type="button" name="add" title="Add" value="fdf">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDateForm" class="formLayout">
      <input type="text" name="date" placeholder="df">
      <input type="button" name="add" title="Add" value="dfd">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newEntryForm" class="formLayout">
      <input type="text" name="disease" placeholder="fd">
      <input type="text" name="date" placeholder="fdf">
      <input type="text" name="deadList" placeholder="fdf">
      <input type="text" data-role="tagsinput" name="fdd" placeholder="fdf">
      <input type="button" name="add" title="Add" value="fdf">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDiseaseForm" class="formLayout">
      <input type="text" name="name" placeholder="sfd">
      <input type="text" name="symptoms" placeholder="sf">
      <input type="text" name="precautions" placeholder="sfs">
      <input type="text" name="riskFactors" placeholder="Rissfsfk Factors">
      <input type="text" name="vaccines" placeholder="sfs">
      <input type="button" name="add" title="Add" value="sf">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newEntryForm" class="formLayout">
      <input type="text" name="disease" placeholder="fd">
      <input type="text" name="date" placeholder="fdf">
      <input type="text" name="deadList" placeholder="fdf">
      <input type="text" data-role="tagsinput" name="fdd" placeholder="fdf">
      <input type="button" name="add" title="Add" value="fdf">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDiseaseForm" class="formLayout">
      <input type="text" name="name" placeholder="sfd">
      <input type="text" name="symptoms" placeholder="sf">
      <input type="text" name="precautions" placeholder="sfs">
      <input type="text" name="riskFactors" placeholder="Rissfsfk Factors">
      <input type="text" name="vaccines" placeholder="sfs">
      <input type="button" name="add" title="Add" value="sf">
    </form>
  </div>
  
  <div class="contentPanel">
    <h4>cdscdcsc</h4>
    <form id="newDateForm" class="formLayout">
      <input type="text" name="date" placeholder="df">
      <input type="button" name="add" title="Add" value="dfd">
    </form>
  </div>
</div>

    I've set the container to the fixed width of 1200px but you can adjust that to your needs.