Grid layout with items in different sizes

Question

I'm stuck with one problem I don't know how to solve.

I have a grid system with 18 items/boxes in the same size. I need to delete 4 items/boxes and make one big item/box of it.

Please check wireframe below. This is how I want it to look :)

.grid_big {
  margin-bottom: 200px;
}

.grid_big .grid_item {
  width: 16.6%;
  display: inline-block;
  float: left;
}

.grid_big .grid_item img {
  width: 100%;
  border: 1px solid;
  /* visibility: hidden; */
}

.grid_big .grid_item .grid_content {
  margin: 20px;
}

<div class="grid_big">
  <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
  <div class="fixfloat"></div>
</div>

( grid item + grid content x 18 )

VXp · Accepted Answer · 2018-09-20 12:24:23Z

You can do something like this with the Grid, which is ideal for this type of a task:

* {box-sizing: border-box}

.grid_big {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(6, 1fr); /* grid-template-rows / grid-template-columns */
  grid-gap: 10px; /* grid-row-gap / grid-column-gap */
}

/* grab the 7th one and make it span 2 rows & columns */
.grid_item:nth-child(7){
  grid-row: span 2;
  grid-column: span 2;
}

img {
  display: block; /* removes bottom margin/whitespace */
  width: 100%;
  border: 1px solid;
}

<div class="grid_big">
  <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
</div>

user9026111 · Accepted Answer · 2018-09-20 12:20:02Z

0

Grid (grid-template-areas) might solve your problem.

answered Sep 20, 2018 at 12:20

user9026111

4 Comments

user9924086 Over a year ago

Thanks but I'm afraid that the grid-template doesn't work in all browser's I work with.

user9026111 Over a year ago

Check this caniuse.com/#feat=css-grid. There you can check if it works with your browser.

user9924086 Over a year ago

Thanks! I can't use grid-template in this case because it need to work in every browser according to my task. So I need to solve it on another way. Thanks anyway :)

user9026111 Over a year ago

Maybe Flexbox might me worth a try. However I can't tell you if it will work since I prefere grid.

Collectives™ on Stack Overflow

Grid layout with items in different sizes

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related