2

I am working on a project that need to display items by 4 columns grid.

Like this:

enter image description here

So I put col-3 class to my items.

But some items are important, that I need to display it with twice width and height.

So I changed that item class to col-6.

Now it looks like this:

enter image description here

I can use table instead but it's not media friendly...

Is there a way to make it look like this without messing up the div structure?

enter image description here

Hao Wu
  • 17,573
  • 6
  • 28
  • 60
  • 2
    Have you seen [CSS grid](https://learncssgrid.com/)? I think it should be much easier to use in your case than bootstrap grid. – Matt Sep 05 '18 at 08:43
  • 2
    Bootstrap's grid system is not made that you could expand some item in multiple rows. It is a row based system. The problem that you have described would be a perfect task for css grid -> https://www.w3schools.com/css/css_grid.asp – Gregor Ojstersek Sep 05 '18 at 08:43
  • Possible duplicate of [How can I get a Bootstrap column to span multiple rows?](https://stackoverflow.com/questions/16390370/how-can-i-get-a-bootstrap-column-to-span-multiple-rows) – Matt Sep 05 '18 at 09:16
  • I've seen that question. It solved by nesting the row and col classes to achieve that. Which is not very efficient and completely messed up the div structure... – Hao Wu Sep 05 '18 at 10:11

2 Answers2

2

I would use the grid system to keep your actual structure which is not yet implemented in boostrap.

see for more information : https://css-tricks.com/snippets/css/complete-guide-grid/ http://gridbyexample.com/

mind the support too https://caniuse.com/#search=grid

The idea is to set a grid of 4 columns and make some of your elements spanning through 2 colums and 2 rows. CSS to use for a grid child:

grid-row:auto /span 2;
grid-column:auto / span 2;

demo, second or third & fith 

section {
  float: left;
  border:solid;
  width: 40%;
  margin: 0.5em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);  
  
  grid-template-rows:repeat(4, 1fr);
  grid-auto-flow: dense;
  grid-gap: 0.5em;
  padding: 0.5em;
  counter-reset: divs
}

div {
  background: teal;
  counter-increment: divs;
  min-height: 10vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
  color: white;
}

div:before {
  content: counter(divs)
}

section:first-of-type div:nth-child(2) {
  grid-row: auto /span 2;
  grid-column: auto / span 2;
}

section+section div:nth-child(3),
section+section div:nth-child(5){
  grid-row: auto /span 2;
  grid-column: auto / span 2;
}
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

or span through the grid on hover only on hover :

section {
  width:40%;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-gap:0.5em;
  padding:0.5em;
  counter-reset:divs
}
div {
  background:teal;
  counter-increment:divs;
  min-height:10vw;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:5vw;
  color:white;
}
div:before {
  content:counter(divs)
}
div:hover{
  grid-row:auto /span 2;
  grid-column:auto / span 2;
}
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
1

It can be done by nesting bootstrap grid system.

<div class="container">
<div class="row text-center">
    <div class="col col-sm-3">
        <div class="row text-center">
            <div class="col col-sm-12">
                1
            </div>
            <div class="col col-sm-12">
                4
            </div>
        </div>
    </div>
    <div class="col col-sm-6">2
    </div>
    <div class="col col-sm-3">
        <div class="row text-center">
            <div class="col col-sm-12">
                3
            </div>
            <div class="col col-sm-12">
                5
            </div>
        </div>
    </div>
</div>
<div class="row text-center">
    <div class="col col-sm-4">
        <div>
            6
        </div>
    </div>
    <div class="col col-sm-4">
        <div>
            7
        </div>
    </div>
    <div class="col col-sm-4">
        <div>
            8
        </div>
    </div>
</div>

refer to this answer Stackoverflow answer

binf
  • 76
  • 1
  • 3