11 replies

Grid system

Anyone know if this is possible?

I want to make a grid system. Now it is not possible to get them right. Photo 1 is what it currently looks like, but it. should be like photo 2.

So everything should fit together

This is my css

 .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 6px;
    overflow: hidden;
}
.grid .col-grid-6 { 
    grid-column: span 6;
    height: max-content;
}

 .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 6px;
    overflow: hidden;
}
.grid .col-grid-6 { 
    grid-column: span 6;
    height: max-content;
}

This is my html

<div class="grid">
  <div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
</div>

<div class="grid">
  <div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
</div>

Hopefully someone can help me?

Grid system

 .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 6px;
    overflow: hidden;
}
.grid .col-grid-6 { 
    grid-column: span 6;
    height: max-content;
}

 .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 6px;
    overflow: hidden;
}
.grid .col-grid-6 { 
    grid-column: span 6;
    height: max-content;
}

This is my html

<div class="grid">
  <div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
</div>

<div class="grid">
  <div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
<div class="col-grid-6 col-grid-lg-4">
    <div class="card">
      <div class="card-body">
      <-- rest of code -->
      </div>
    </div>
  </div>
</div>

Hopefully someone can help me?

Grid system

Similar Threads

Grid system

Similar Threads

Similar Threads

Similar Threads